javascript

位置:IT落伍者 >> javascript >> 浏览文章

js操作iframe的一些方法介绍


发布日期:2023年12月09日
 
js操作iframe的一些方法介绍

获得iframe的window对象
存在跨域访问限制

chromeiframeElement contentWindow
firefox iframeElementcontentWindow
ieiframeElementcontentWindow

文章Iframes onload and documentdomain中说“he iframe element object has  a property called contentDocument that contains the iframes document  object so you can use the parentWindow property to retrieve the window  object”意思就是一些浏览器可以通过iframeElementcontentDocumentparentWindow获得iframe的 window对象但经过测试firefoxchrome的elementcontentDocument对象没有parentWindow属性

(javascript)

复制代码 代码如下:
function getIframeWindow(element){         
return  elementcontentWindow;   
//return  elementcontentWindow || elementcontentDocumentparentWindow;   
}  

获得iframe的document对象
存在跨域访问限制

chromeiframeElementcontentDocument
firefoxiframeElementcontentDocument
ieelementcontentWindowdocument
备注ie没有iframeElementcontentDocument属性

(javascript)

复制代码 代码如下:
var getIframeDocument = function(element) {   
return  elementcontentDocument || elementcontentWindowdocument;   
};   

iframe中获得父页面的window对象
存在跨域访问限制

父页面windowparent
顶层页面windowtop
适用于所有浏览器

获得iframe在父页面中的html标签
存在跨域访问限制

windowframeElement(类型HTMLElement)适用于所有浏览器

iframe的onload事件
非ie浏览器都提供了onload事件例如下面代码在ie中是不会有弹出框的

(javascript)

复制代码 代码如下:
var ifr = documentcreateElement(iframe);   
ifrsrc = ;   
ifronload = function() {   
alert(loaded);   
};   
documentbodyappendChild(ifr);   


但是ie却又似乎提供了onload事件下面两种方法都会触发onload

方法一

复制代码 代码如下:
<iframe  onload="alert(loaded);"  src="


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

复制代码 代码如下:
var  ifr = documentcreateElement(<iframe  onload="alert(loaded);"  src=");   
documentbodyappendChild(ifr);   


由于iframe元素包含于父级页面中因此以上方法均不存在跨域问题

实际上IE提供了onload事件但必须使用attachEvent进行绑定

复制代码 代码如下:
var ifr = documentcreateElement(iframe);   
ifrsrc = ;   
if (ifrattachEvent) {   
ifrattachEvent(onload  function(){ alert(loaded); });   
} else {   
ifronload  = function() { alert(loaded); };   
}   
documentbodyappendChild(ifr);   

frames
windowframes可以取到页面中的帧(iframeframe等)需要注意的是取到的是window对象而不是HTMLElement

复制代码 代码如下:


var ifr = documentgetElementById(ifr);   
var ifrwin = windowframes[];   
ifrwinframeElement === ifr;   // true   
ifrwin === ifr;    // false

               

上一篇:在JavaScript里嵌入大量字符串常量的实现方法

下一篇:js循环改变div颜色具体方法