iframe父子页面相互调用的js方法

最新推荐文章于 2026-05-15 05:32:22 发布

转载最新推荐文章于 2026-05-15 05:32:22 发布 · 1.2w 阅读

javascript 同时被 2 个专栏收录

49 篇文章

订阅专栏

JQuery

14 篇文章

订阅专栏

本文介绍了在同一主域下的不同二级域中，父页面与子页面（IFrame）如何通过设置document.domain实现跨域通信的方法，并提供了具体的示例代码。

转载来自：http://www.58lou.com/separticle.php?artid=179

当父页面和子页面都属于同一个域下，那么它们之间的js方法是可以相互调用的。在调用方法前指定function所属对象即可，父页面获取iframe所属对象方法为：iframe的name.window.方法名()，iframe页面获取父页面所属对象方法为：parent.方法名()。
但是这里有一个非常重要的限制，由于浏览器基于安全考虑，是不允许js在不同域名间进行通信，所以父子页面必须属于同一个域，即使是相同主域下的不同二级域也是不行的。
对于父子页面完全属于两个不同的域名，那么它们之间永远无法直接进行通信；如果父子页面是属于同一个主域下的不同二级域，则可以使用强制设置document.domain的方式来达到让其互相通信。document.domain默认值是window.location.host，可以js中设置为window.location.host的上一级域，但是不能为根域，例如：可以在页面www.duankou.com设置document.domain为duankou.com，但是不能设置为other.duankou.com或com。
document.domain在一定程度上解决了不同二级域名页面的跨域问题。需要注意的是，如果父页面包含多个iframe且设置了document.domain，那么要与其进行通信的iframe也必须设置document.domain。
另外在chrome 18中，父子页面属于相同域名，当设置document.domain后，它们之间变的无法通信了，其他浏览器正常。

父页面（parent.html）：

 
   <!DOCTYPE html >  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>parent</title>  
 </head>  
   
 <body>  
 <input type="button" value="call child" onclick="callChild()"/>  
 <iframe name="child" src="child.html" ></iframe>  
   
 <script>  
   
 function parentFunction() {  
     alert('function in parent');  
 }  
   
 function callChild() {  
     //child 为iframe的name属性值，不能为id，因为在FireFox下id不能获取iframe对象  
     child.window.childFunction();  
 }  
   
 </script>  
   
 </body>  
 </html>  
 
 

子页面（iframe页面，child.html）：

 
   <!DOCTYPE html >  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>child</title>  
 </head>  
   
 <body>  
 <input type="button" value="call parent" onclick="callParent()"/>  
   
 <script>  
   
 function childFunction() {  
     alert('function in child');  
 }  
   
 function callParent() {  
     parent.parentFunction();  
 }  
   
 </script>  
   
 </body>  
 </html>  
 
 

谁看过该文章

admin 04-25 11:00

[iframe父子页面相互调..]的评论

hnliji1107
04-25 11:03 / Windows NT / Safari 537.31

从iframe中查找父页面中对象的方法：
JS:
1. [window.]parent //查找父页面的window对象
2. [window.]parent.document //查找父页面的document对象
3. [window.]parent.document.body //查找父页面的body对象
4. [window.]parent.document.getElementById('button') //查找父页面中id为button的对象
jQuery:
1. $([window.]parent) //查找父页面的window对象
2. $([window.]parent.document) //查找父页面的document对象
3. $([window.]parent.document.body) //查找父页面的body对象
4. $([window.]parent.document.body).find('#button') //查找父页面中id为button的对象
ta的签名：无怨无悔我走我路
引用 | 回复
#1
hnliji1107
04-25 13:34 / Windows NT / Safari 537.31

从父页面中查找iframe子页面中对象的方法：
JS:
1. document.getElementById('iframe').contentWindow //查找iframe加载的页面的window对象
2. document.getElementById('iframe').contentWindow.document //查找iframe加载的页面的document对象
3. document.getElementById('iframe').contentWindow.document.body //查找iframe加载的页面的body对象
4. document.getElementById('iframe').contentWindow.document.getElementById('icontent') //查找iframe加载的页面的id为icontent的对象
jQuery:
1. $iframe.contents() //查找iframe加载的页面的document对象
2. $iframe.contents().find('body') //查找iframe加载的页面的body对象
3. $iframe.contents().find('body').find('#icontent') //查找iframe加载的页面的id为icontent的对象