JS操作iframe

转自：http://www.cnblogs.com/rainman/archive/2011/02/16/1956431.html

• 1. 获得iframe的window对象
• 2. 获得iframe的document对象
• 3. iframe中获得父页面的window对象
• 4. 获得iframe在父页面中的html标签
• 5. iframe的onload事件
• 6. frames
• 参考文章

1. 获得iframe的window对象

存在跨域访问限制。

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属性。

view plain copy to clipboard print ?

1. function getIframeWindow(element){        
2.     return  element.contentWindow;  
3.     //return  element.contentWindow || element.contentDocument.parentWindow;  
4. }  

2. 获得iframe的document对象

存在跨域访问限制。

chrome：iframeElement.contentDocument
firefox：iframeElement.contentDocument
ie：element.contentWindow.document
备注：ie没有iframeElement.contentDocument属性。

view plain copy to clipboard print ?

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

3. iframe中获得父页面的window对象

存在跨域访问限制。

父页面：window.parent
顶层页面：window.top
适用于所有浏览器

4. 获得iframe在父页面中的html标签

存在跨域访问限制。

window.frameElement（类型：HTMLElement），适用于所有浏览器

5. iframe的onload事件

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

view plain copy to clipboard print ?

1. var ifr = document.createElement('iframe');  
2. ifr.src = 'http://www.b.com/index.php';  
3. ifr.onload = function() {  
4.     alert('loaded');  
5. };  
6. document.body.appendChild(ifr);  

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

view plain copy to clipboard print ?

1. 方法一：  
2. <iframe  onload="alert('loaded');"  src="http://www.b.com/index.php"></iframe>  
3.   
4. 方法二：  
5. //只有ie才支持为createElement传递这样的参数  
6. var ifr = document.createElement('<iframe  onload="alert('loaded');" src="http://www.b.com/index.php"></iframe>');  
7. document.body.appendChild(ifr);  

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

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

view plain copy to clipboard print ?

1. var ifr = document.createElement('iframe');  
2. ifr.src = 'http://b.a.com/b.php';  
3. if (ifr.attachEvent) {  
4.     ifr.attachEvent('onload',  function(){ alert('loaded'); });  
5. } else {  
6.     ifr.onload  = function() { alert('loaded'); };  
7. }  
8. document.body.appendChild(ifr);  

6. frames

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

view plain copy to clipboard print ?

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

参考文章

• Iframes, onload, and document.domain
• 【翻译】Iframe, onload 与 document.domain
• 《JS权威指南第五版》

转自：http://www.blogjava.net/wx886104/archive/2009/08/20/291945.html

今天由于客户对功能提出新要求。采用js操作iframe解决问题。特记录其中遇到的问题。
用Js控制iframe内表单提交
代码如下：

 1 <% @ page language = " java "   import = " java.util.* "  pageEncoding = " GB18030 " %>
 2 <! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01 Transitional//EN " >
 3 < html >
 4    < head >     
 5      < title > c.jsp </ title >
 6     
 7      < meta http - equiv = " pragma "  content = " no-cache " >
 8      < meta http - equiv = " cache-control "  content = " no-cache " >
 9      < meta http - equiv = " expires "  content = " 0 " >     
10      < meta http - equiv = " keywords "  content = " keyword1,keyword2,keyword3 " >
11      < meta http - equiv = " description "  content = " This is my page " >     
12
13      < script type = " text/javascript " >
14      <!--
15         function reg() {
16        jsi.document.all.username.value="xxx";
17        jsi.document.all.userid.value="xxx>";
18        jsi.document.all.flag.value="xxx";
19          jsi.document.forms["jsf"].submit();        
20          window.open("http://js.51baojian.net","_blank");  
21          setTimeout("",3000);
22          window.location.href="http://jss.51baojian.net";
23    }
24      -->
25      </ script >
26    </ head >
27   
28    < body onload = " reg(); " >
29      < table cellpadding = " 0 "  cellspacing = " 0 "  border = " 0 " >
30          < tr >< td >
31             页面进入中..
32              < iframe id = " jsi "  name = " jsi "  frameborder = " 0 "
33                     src = " b.jsp "  height = " 0 "  width = " 0 "
34              ></ iframe >
35          </ td ></ tr >         
36      </ table >
37    </ body >
38 </ html >

b.jsp代码为：

1
2 < form id = " jsf "  name = " jsf "  action = " url " >
3      < input type = " hidden "  name = " username "  value = "" >
4      < input type = " hidden "  name = " userid "  value = "" >
5      < input type = " hidden "  name = " flag "  value = "" >                 
6 </ form >
7

注意：
页面加载时，遇到 iframe 就直接跳过去，加载下面的内容，然后再回来加载 iframe ，当然也可以理解成遇到 iframe 又开了一个线程来加载 iframe ，但是因为涉及到新的 IO 操作比较耗时，所以如果在iframe下写了js操作的话，会提示错误。可以采用onload来触发js操作执行。
在注意：（知道的就不要看了）

onload指整个页面加载完成后再执行init（）函数，而不是当页面加载到<body>时就开始执行。

同样，onunload指整个页面卸载完成（关闭）后。