`

各浏览器Iframe对contentWindow、contentDocument、document及frames属性测试

 
阅读更多




    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的。
分享到:
评论

相关推荐

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

    1. **IE6/7**:这两个版本的IE不支持`contentWindow`和`contentDocument`,因此需要使用`document.frames`来访问`iframe`的内容。同时,由于这些浏览器不支持`addEventListener`,需要使用`attachEvent`来添加事件...

    iframe自适应高度(兼容多种浏览器)

    1. **浏览器兼容性**:使用`contentDocument`和`contentWindow`可以覆盖大多数现代浏览器,但对于旧版本的IE浏览器则需要采用`document.frames`的方式。 2. **事件监听**:除了在页面加载完成后调用调整高度的方法外...

    获取iframe子网页的Height

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

    iframe框架\JS获取iframe元素

    除了`document.frames`之外,还可以使用`contentWindow`属性来访问`iframe`内的文档窗口对象。这种方法在多种浏览器中都有效。 ```javascript window.onload = function() { var iObj = document.getElementById('...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    需要注意的是,`document.frames`是老式的方法,用于访问`<frameset>`内的`<frame>`元素,而在现代浏览器中,更推荐使用`contentWindow`或`contentDocument`来访问`<iframe>`的内容。在这个例子中,我们使用了`...

    JS操作iframe里的dom

    此外,现代浏览器还支持`window.frames`属性,它是一个数组,包含了所有窗口(包括iframe)的引用。因此,可以通过索引来访问特定的iframe并操作其DOM。 总结来说,JavaScript操作iframe中的DOM涉及获取iframe引用...

    ajax iframe上传.

    6. **获取iframe内容**:由于同源策略限制,我们不能直接访问iframe的`contentDocument`或`contentWindow`,但可以通过`window.frames`属性间接获取。 ```javascript function getIFrameContent(iframe) { var doc...

    iframe应用

    return document.getElementById(iframeId).contentDocument || window.frames[iframeId].document; } ``` 这里的代码考虑到了不同浏览器的兼容性问题。`contentDocument`属性是为了解决IE9及以下版本不支持`...

    JS获取iframe内容【简化版】

    - 可以通过`window.frames['iframeName'].document`或`document.getElementById('iframeId').contentDocument`来访问iframe内的文档对象。 #### 实现方法详解 1. **访问iframe内容的基本步骤**: 1. **定位...

    外部滚动条控制iframe

    这通常通过修改`iframe.contentDocument.body.scrollTop`或`iframe.contentWindow.scrollTo(x, y)`来实现。 #### 知识点三:示例代码分析 提供的代码片段展示了如何使用CSS和JavaScript结合,实现外部滚动条对...

    js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]

    3. 为了兼容所有主流浏览器,推荐使用跨浏览器的方法:通过 id 获取 iframe 元素,然后访问其 contentWindow 属性,最后通过该属性访问 document 对象。 最后,需要注意的是,由于不同浏览器的 DOM 实现可能存在...

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

    2. **获取iframe的document对象**:`iframe.contentDocument` 提供了对iframe内HTML文档的访问,等同于 `iframe.contentWindow.document`。你可以通过这个对象访问到iframe内的DOM元素: ```javascript var idoc =...

    javascript iframe parent?

    在JavaScript中,我们可以通过iframe的`contentWindow`或`contentDocument`属性与iframe内的文档进行交互。 标题"javascript iframe parent"指出我们要讨论的是JavaScript如何与iframe的父页面进行通信。这通常涉及...

    iframe 自适应高度[在IE6 IE7 FF下测试通过]

    `document.frames`用于处理IE浏览器,而`contentDocument`则是W3C标准中的属性。`body.scrollHeight`用于获取文档主体的高度,确保`iframe`高度适应内容高度。 ### 第二种方法 第二种方法同样利用JavaScript,但...

    JS获取并操作iframe中元素的方法

    在某些浏览器(例如IE)中,除了标准的DOM方法外,还可以直接使用简化的属性访问方式,如document.frames[i]或document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')。...

    frameset父页面和子页面的方法之间调用个属性的调用(页面上可以包含iframe)

    `contentWindow`指向`iframe`的`window`对象,`contentDocument`则指向`iframe`的`document`对象,从而可以操作子页面的DOM。 ```javascript var iframeContentWindow = iframeElement.contentWindow; // iframe...

    js打印工具.zip

    2. **赋值给IFrame**:通过`iframe.contentWindow.document.write()`或`iframe.contentDocument.body.innerHTML`向IFrame填充HTML内容。 3. **设置打印选项**:使用`window.frames['iframeName'].print()`或`window...

    js判断iframe中元素是否存在的实现代码

    关键在于正确地获取`iframe`的`contentWindow`或`contentDocument`属性,然后通过这些属性访问和操作`iframe`的DOM结构。在进行跨域操作时,务必确保遵循同源策略,否则可能导致安全问题或功能受限。

    javascript在IE和Firefox中兼容性问题

    在IE中,可以通过`window.frames`或`parent.frames`访问iframe或frame的内容,而在Firefox中,通常使用`contentWindow`或`contentDocument`属性来访问。 4. **设置元素文本内容测试.html** IE支持`innerText`属性...

Global site tag (gtag.js) - Google Analytics