对于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` 是两个非常重要的JavaScript属性,它们用于在iframe之间进行通信和操作。 `contentWindow` 是一个对象,它代表了嵌入在iframe中的窗口,即子窗口的`window`对象。通过这个...
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; iframeDoc.head.innerHTML = '<style>@media print {...}</style>'; iframeDoc.body.innerHTML = '这是页眉</header><main>打印内容...
2. **IE8**:虽然支持`contentWindow`和`contentDocument`,但没有`MutationObserver`,所以需要在`window.onload`或`iframe.onload`事件中处理高度自适应。 3. **Firefox**:Firefox通常能较好地处理`iframe`,但...
总结一下,本文主要介绍了如何在JavaScript中获取Iframe内容,包括非跨域情况下的`contentWindow`和`contentDocument`属性,以及跨域通信的`PostMessage`方法。通过这些技术,开发者可以有效地处理Iframe相关的复杂...
可以监听`load`事件,当`iframe`加载完成后,通过`contentWindow`和`contentDocument`属性获取内容的尺寸,然后调整`iframe`的大小。例如: ```javascript document.getElementById('myIframe').addEventListener('...
1. **JavaScript监听滚动事件**:通过监听iframe的`load`事件,当内容加载完成后,获取iframe的contentWindow或contentDocument对象,计算其高度并赋值给iframe的height属性。 2. **使用postMessage通信**:如果...
这里要理解框架的两个属性 contentWindow 和contentDocument 两个属性的意思和window document意思差不多,不同的是contentWindow 所有浏览器都支持,contentDocument ie6,7不支持,chrome 也不支持 <iframe ...
在同一个域下,可以使用`contentWindow`或`contentDocument`属性来访问`iframe`中的内容。例如,假设`iframe`的ID为`myIframe`,我们可以这样获取其内容: ```javascript var iframe = document.getElementById('...
3. **iframe的contentWindow和contentDocument**:`contentWindow`属性提供了对iframe内窗口的直接访问,你可以通过它调用window对象的方法,如`contentWindow.location.href`改变iframe加载的页面。而`...
在iframe内实现页面跳转通常使用`iframe.contentWindow.location.href`或`iframe.contentDocument.location.href`,具体取决于浏览器的兼容性。 ```javascript var iframe = document.getElementById('myIframe'); ...
3. 当`iframe`加载完成时,通过`contentWindow`和`contentDocument`属性访问`iframe`内部的窗口和文档对象。 4. 获取`iframe`内容区域的高度,如`contentDocument.body.scrollHeight`或`contentDocument....
在开始之前,首先我们来看看如何获取iframe里的内容,获取iframe中内容主要的两个API就是contentWindow,和contentDocument iframe.contentWindow, 获取iframe的window对象 iframe.contentDocument, 获取iframe的...
3. **监听`load`事件**:当`iframe`内的页面加载完成后,我们可以通过`contentWindow`和`contentDocument`属性访问到`iframe`内的`window`和`document`对象,进而获取其内容的高度。 ```javascript iframe.onload...
接下来,我们需要访问iframe的`contentWindow`或`contentDocument`属性。`contentWindow`属性返回iframe的全局window对象,而`contentDocument`则返回iframe内部的文档对象。由于同源策略的限制,只有当iframe加载的...
这段代码中,通过`iframeid.contentDocument.body.offsetHeight`或者`iframeid.contentWindow.document.body.scrollHeight`来获取内部页面的高度,并将其设置为`<iframe>`的高度。 ##### 2. 动态调整`<iframe>`的...
在Chrome、Firefox等现代浏览器中,可以通过JavaScript的`contentWindow`和`contentDocument`属性来访问`iframe`内的窗口对象和文档对象。例如: ```javascript var iframe = document.getElementById('iframeId');...
- 一个常见的方法是利用`onload`事件监听Iframe的加载完成,然后通过JavaScript获取Iframe的contentDocument(或contentWindow.document,取决于浏览器兼容性)的body高度,将其设置为Iframe的高度。 2. **跨域...
获取到`iframe`元素后,我们可以通过`contentWindow`属性访问`iframe`中的`window`对象,如果是同源策略允许的,还可以通过`contentDocument`访问`iframe`的`document`对象。例如: ```javascript var iframe...
要访问`iframe`中的内容,我们可以使用JavaScript的`contentWindow`或`contentDocument`属性。例如,获取`iframe`中`body`元素: ```javascript var iframe = document.getElementById('myIframe'); var iframe...