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

最新推荐文章于 2025-05-19 11:12:17 发布

转载最新推荐文章于 2025-05-19 11:12:17 发布 · 888 阅读

java-web 专栏收录该内容

5 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当父页面和子页面都属于同一个域下，那么它们之间的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>  