当前位置：首页 > 资讯 > 技术文档

js操作iframe的一些方法介绍

时间：2022-09-19 01:12 编辑：来源：阅读：
扫一扫，手机访问

摘要：js操作iframe的一些方法介绍

[b]1. 获得iframe的window对象 [/b]存在跨域访问限制。 chrome：iframeElement. contentWindow firefox： iframeElement.contentWindow ie6：iframeElement.contentWindow 文章Iframes, onload, and document.domain中说“he iframe element object has a property called contentDocument that contains the iframe's document object, so you can use the parentWindow property to retrieve the window object.”意思就是一些浏览器可以通过iframeElement.contentDocument.parentWindow获得iframe的window对象。但经过测试firefox、chrome的element.contentDocument对象没有parentWindow属性。 (javascript)

[u]复制代码[/u] 代码如下:

function getIframeWindow(element){        
    return  element.contentWindow;  
    //return  element.contentWindow || element.contentDocument.parentWindow;  
} 

[b]2. 获得iframe的document对象 [/b]存在跨域访问限制。 chrome：iframeElement.contentDocument firefox：iframeElement.contentDocument ie：element.contentWindow.document 备注：ie没有iframeElement.contentDocument属性。 (javascript)

[u]复制代码[/u] 代码如下:

var getIframeDocument = function(element) {  
    return  element.contentDocument || element.contentWindow.document;  
};  

[b]3. iframe中获得父页面的window对象 [/b]存在跨域访问限制。父页面：window.parent 顶层页面：window.top 适用于所有浏览器 [b]4. 获得iframe在父页面中的html标签 [/b]存在跨域访问限制。 window.frameElement（类型：HTMLElement），适用于所有浏览器 [b]5. iframe的onload事件 [/b]非ie浏览器都提供了onload事件。例如下面代码在ie中是不会有弹出框的。 (javascript)

[u]复制代码[/u] 代码如下:

var ifr = document.createElement('iframe');  
ifr.src = 'http://www.1sucai.cn/index.php';  
ifr.onload = function() {  
    alert('loaded');  
};  
document.body.appendChild(ifr);  

但是ie却又似乎提供了onload事件，下面两种方法都会触发onload [b]方法一： [/b]

[u]复制代码[/u] 代码如下:

<iframe  onload="alert('loaded');"  src="http://www.1sucai.cn/index.php"></iframe>  
 

[b]方法二：[/b] //只有ie才支持为createElement传递这样的参数

[u]复制代码[/u] 代码如下:

var ifr = document.createElement('<iframe  onload="alert('loaded');" src="http://www.1sucai.cn/index.php"></iframe>');  
document.body.appendChild(ifr);  

由于iframe元素包含于父级页面中，因此以上方法均不存在跨域问题。实际上IE提供了onload事件，但必须使用attachEvent进行绑定。

[u]复制代码[/u] 代码如下:

var ifr = document.createElement('iframe');  
ifr.src = 'http://b.jb51.net/b.php';  
if (ifr.attachEvent) {  
    ifr.attachEvent('onload',  function(){ alert('loaded'); });  
} else {  
    ifr.onload  = function() { alert('loaded'); };  
}  
document.body.appendChild(ifr);  

[b]6. frames [/b]window.frames可以取到页面中的帧(iframe、frame等)，需要注意的是取到的是window对象，而不是HTMLElement。

[u]复制代码[/u] 代码如下:

var ifr1 = document.getElementById('ifr1');  
var ifr1win = window.frames[0];  
ifr1win.frameElement === ifr1;   // true  
ifr1win === ifr1;    // false  

全部评论(0)

上一篇：仿Google和Windows Live的拖拽
下一篇：移动端翻页插件dropload.js（支持Zepto和jQuery）

资讯排行榜
更多>>