Iframe易于嵌套及管理页面,但经常遇到跨域、父子页面访问问题,对于子页面访问父页面可以兼容性地通过window.Top或window.Parent或window.frameElement等操作,但对于标题中四个对象,一直没有完整测试过,故买个苦力,分享给大家。
contentWindow contentDocument document frames
Firefox 11 √ √ × √
Opera 11√ √ × √
Chrome 15
/360 极速 5.2√ × × √
Safari 5.1√ √ × √
Maxthon 3.3√ √× √
IE6 √ × √ √
IE7√ × √ √
IE8/360安全 √ √ √ √
IE9√ √ √ √
IE10√ √ × √
搜狗/QQ/
百度IE√ × √ √
百度极速√ √ × √
结论:
1. 就浏览器而言(横向),IE8/IE9/360安全浏览器全部支持;
2. 就属性而言(纵向),contentWindow和frames所有浏览器都支持,其次是contentDocument,document支持性最差;
3. 由于iframe经常涉及跨域,本地测试(即未发布)环境中,chrome/360极速/IE6/IE9对于contentWindow.document属性是deny状态,原因是Unsafe JavaScript attempt to access frame with URL file:///***.html from frame with URL file:///***.html Domains, protocols and ports must match。IE9本地环境下对于contentDocument也是deny的。
分享到:
相关推荐
1. **IE6/7**:这两个版本的IE不支持`contentWindow`和`contentDocument`,因此需要使用`document.frames`来访问`iframe`的内容。同时,由于这些浏览器不支持`addEventListener`,需要使用`attachEvent`来添加事件...
1. **浏览器兼容性**:使用`contentDocument`和`contentWindow`可以覆盖大多数现代浏览器,但对于旧版本的IE浏览器则需要采用`document.frames`的方式。 2. **事件监听**:除了在页面加载完成后调用调整高度的方法外...
在Chrome、Firefox等现代浏览器中,可以通过JavaScript的`contentWindow`和`contentDocument`属性来访问`iframe`内的窗口对象和文档对象。例如: ```javascript var iframe = document.getElementById('iframeId');...
除了`document.frames`之外,还可以使用`contentWindow`属性来访问`iframe`内的文档窗口对象。这种方法在多种浏览器中都有效。 ```javascript window.onload = function() { var iObj = document.getElementById('...
需要注意的是,`document.frames`是老式的方法,用于访问`<frameset>`内的`<frame>`元素,而在现代浏览器中,更推荐使用`contentWindow`或`contentDocument`来访问`<iframe>`的内容。在这个例子中,我们使用了`...
此外,现代浏览器还支持`window.frames`属性,它是一个数组,包含了所有窗口(包括iframe)的引用。因此,可以通过索引来访问特定的iframe并操作其DOM。 总结来说,JavaScript操作iframe中的DOM涉及获取iframe引用...
6. **获取iframe内容**:由于同源策略限制,我们不能直接访问iframe的`contentDocument`或`contentWindow`,但可以通过`window.frames`属性间接获取。 ```javascript function getIFrameContent(iframe) { var doc...
return document.getElementById(iframeId).contentDocument || window.frames[iframeId].document; } ``` 这里的代码考虑到了不同浏览器的兼容性问题。`contentDocument`属性是为了解决IE9及以下版本不支持`...
- 可以通过`window.frames['iframeName'].document`或`document.getElementById('iframeId').contentDocument`来访问iframe内的文档对象。 #### 实现方法详解 1. **访问iframe内容的基本步骤**: 1. **定位...
这通常通过修改`iframe.contentDocument.body.scrollTop`或`iframe.contentWindow.scrollTo(x, y)`来实现。 #### 知识点三:示例代码分析 提供的代码片段展示了如何使用CSS和JavaScript结合,实现外部滚动条对...
3. 为了兼容所有主流浏览器,推荐使用跨浏览器的方法:通过 id 获取 iframe 元素,然后访问其 contentWindow 属性,最后通过该属性访问 document 对象。 最后,需要注意的是,由于不同浏览器的 DOM 实现可能存在...
2. **获取iframe的document对象**:`iframe.contentDocument` 提供了对iframe内HTML文档的访问,等同于 `iframe.contentWindow.document`。你可以通过这个对象访问到iframe内的DOM元素: ```javascript var idoc =...
在JavaScript中,我们可以通过iframe的`contentWindow`或`contentDocument`属性与iframe内的文档进行交互。 标题"javascript iframe parent"指出我们要讨论的是JavaScript如何与iframe的父页面进行通信。这通常涉及...
`document.frames`用于处理IE浏览器,而`contentDocument`则是W3C标准中的属性。`body.scrollHeight`用于获取文档主体的高度,确保`iframe`高度适应内容高度。 ### 第二种方法 第二种方法同样利用JavaScript,但...
在某些浏览器(例如IE)中,除了标准的DOM方法外,还可以直接使用简化的属性访问方式,如document.frames[i]或document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')。...
`contentWindow`指向`iframe`的`window`对象,`contentDocument`则指向`iframe`的`document`对象,从而可以操作子页面的DOM。 ```javascript var iframeContentWindow = iframeElement.contentWindow; // iframe...
2. **赋值给IFrame**:通过`iframe.contentWindow.document.write()`或`iframe.contentDocument.body.innerHTML`向IFrame填充HTML内容。 3. **设置打印选项**:使用`window.frames['iframeName'].print()`或`window...
关键在于正确地获取`iframe`的`contentWindow`或`contentDocument`属性,然后通过这些属性访问和操作`iframe`的DOM结构。在进行跨域操作时,务必确保遵循同源策略,否则可能导致安全问题或功能受限。
在IE中,可以通过`window.frames`或`parent.frames`访问iframe或frame的内容,而在Firefox中,通常使用`contentWindow`或`contentDocument`属性来访问。 4. **设置元素文本内容测试.html** IE支持`innerText`属性...