`

关于 contentWindow, contentDocument

 
阅读更多
对于iframe我们经常会遇到跨窗口获取对象。
contentWindow 兼容各个浏览器,可取得子窗口的 window 对象。

contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 对象。

function showIframeH(){

    var parentWin = parent.document.getElementById("test");

    if(!parentWin) return false;

    

    var sub = parentWin.contentWindow.document.getElementById("test2");

    if(!sub) return false;

    

    var thirdHeight = sub.contentWindow.document.body.offsetHeight; //第三层 body 对象

    

    sub.height = thirdHeight; //设置第二层 iframe 的高度

    

    var secondHeight = x.contentWindow.document.body.offsetHeight; //第二层 body 对象

    x.height = secondHeight; //设置第一层 iframe 的高度

    //alert(secondHeight);

    //alert('body: ' + x.contentDocument.body.offsetHeight + ' div:' + thirdHeight);

}


分享到:
评论

相关推荐

    深入解析contentWindow, contentDocument

    `contentWindow` 和 `contentDocument` 是两个非常重要的JavaScript属性,它们用于在iframe之间进行通信和操作。 `contentWindow` 是一个对象,它代表了嵌入在iframe中的窗口,即子窗口的`window`对象。通过这个...

    js iframe 打印 打印预览 页眉页脚的设置

    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; iframeDoc.head.innerHTML = '<style>@media print {...}</style>'; iframeDoc.body.innerHTML = '这是页眉</header><main>打印内容...

    iframe高度自适应,多浏览器兼容

    2. **IE8**:虽然支持`contentWindow`和`contentDocument`,但没有`MutationObserver`,所以需要在`window.onload`或`iframe.onload`事件中处理高度自适应。 3. **Firefox**:Firefox通常能较好地处理`iframe`,但...

    [导入]Javascript获取IFrame内容(兼容IE&FF)

    总结一下,本文主要介绍了如何在JavaScript中获取Iframe内容,包括非跨域情况下的`contentWindow`和`contentDocument`属性,以及跨域通信的`PostMessage`方法。通过这些技术,开发者可以有效地处理Iframe相关的复杂...

    iframe根据页面内容自适应高度和宽度

    可以监听`load`事件,当`iframe`加载完成后,通过`contentWindow`和`contentDocument`属性获取内容的尺寸,然后调整`iframe`的大小。例如: ```javascript document.getElementById('myIframe').addEventListener('...

    iframe框架使用(完美版)

    1. **JavaScript监听滚动事件**:通过监听iframe的`load`事件,当内容加载完成后,获取iframe的contentWindow或contentDocument对象,计算其高度并赋值给iframe的height属性。 2. **使用postMessage通信**:如果...

    javascript实现框架高度随内容改变的方法

    这里要理解框架的两个属性 contentWindow 和contentDocument 两个属性的意思和window document意思差不多,不同的是contentWindow 所有浏览器都支持,contentDocument ie6,7不支持,chrome 也不支持 <iframe ...

    js iframe 方法及元素相互调用

    在同一个域下,可以使用`contentWindow`或`contentDocument`属性来访问`iframe`中的内容。例如,假设`iframe`的ID为`myIframe`,我们可以这样获取其内容: ```javascript var iframe = document.getElementById('...

    js操作iframe的一些知识

    3. **iframe的contentWindow和contentDocument**:`contentWindow`属性提供了对iframe内窗口的直接访问,你可以通过它调用window对象的方法,如`contentWindow.location.href`改变iframe加载的页面。而`...

    JS页面跳转和js对iframe进行页面跳转、刷新

    在iframe内实现页面跳转通常使用`iframe.contentWindow.location.href`或`iframe.contentDocument.location.href`,具体取决于浏览器的兼容性。 ```javascript var iframe = document.getElementById('myIframe'); ...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    3. 当`iframe`加载完成时,通过`contentWindow`和`contentDocument`属性访问`iframe`内部的窗口和文档对象。 4. 获取`iframe`内容区域的高度,如`contentDocument.body.scrollHeight`或`contentDocument....

    利用JS对iframe父子(内外)页面进行操作的方法教程

    在开始之前,首先我们来看看如何获取iframe里的内容,获取iframe中内容主要的两个API就是contentWindow,和contentDocument iframe.contentWindow, 获取iframe的window对象 iframe.contentDocument, 获取iframe的...

    js实现iframe自适应高度

    3. **监听`load`事件**:当`iframe`内的页面加载完成后,我们可以通过`contentWindow`和`contentDocument`属性访问到`iframe`内的`window`和`document`对象,进而获取其内容的高度。 ```javascript iframe.onload...

    JS操作iframe里的dom

    接下来,我们需要访问iframe的`contentWindow`或`contentDocument`属性。`contentWindow`属性返回iframe的全局window对象,而`contentDocument`则返回iframe内部的文档对象。由于同源策略的限制,只有当iframe加载的...

    js菜鸟笔记之框架高度自适应_ekom.cn

    这段代码中,通过`iframeid.contentDocument.body.offsetHeight`或者`iframeid.contentWindow.document.body.scrollHeight`来获取内部页面的高度,并将其设置为`<iframe>`的高度。 ##### 2. 动态调整`<iframe>`的...

    获取iframe子网页的Height

    在Chrome、Firefox等现代浏览器中,可以通过JavaScript的`contentWindow`和`contentDocument`属性来访问`iframe`内的窗口对象和文档对象。例如: ```javascript var iframe = document.getElementById('iframeId');...

    完整可行、浏览器兼容、通过测试的Iframe高度自适应程序

    - 一个常见的方法是利用`onload`事件监听Iframe的加载完成,然后通过JavaScript获取Iframe的contentDocument(或contentWindow.document,取决于浏览器兼容性)的body高度,将其设置为Iframe的高度。 2. **跨域...

    父窗口调用iframe子窗口方法

    获取到`iframe`元素后,我们可以通过`contentWindow`属性访问`iframe`中的`window`对象,如果是同源策略允许的,还可以通过`contentDocument`访问`iframe`的`document`对象。例如: ```javascript var iframe...

    关于iframe中生成父窗口元素及增加event事件的问题(IE已实现,Firefox暂未实现)

    要访问`iframe`中的内容,我们可以使用JavaScript的`contentWindow`或`contentDocument`属性。例如,获取`iframe`中`body`元素: ```javascript var iframe = document.getElementById('myIframe'); var iframe...

Global site tag (gtag.js) - Google Analytics