访问嵌套iframe遇到的问题

最新推荐文章于 2025-05-16 10:26:34 发布

置顶雨后n彩虹

最新推荐文章于 2025-05-16 10:26:34 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： iframe 父窗口弹出层子窗口

本文链接：https://blog.youkuaiyun.com/jin19930729/article/details/23143923

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在实现类似Mini UI弹出层效果时遇到的iframe父子窗口交互问题，特别是如何通过contentwindow属性传递参数和返回值。在解决过程中，发现在不同浏览器中，必须在onload事件中调用iframe内的方法才能避免“函数未定义”的错误。此外，还发现了由于跨域导致的兼容性问题，最终通过将文件放在同一服务器下解决了跨域问题，实现全浏览器兼容。

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

一直想做个类似mini ui中的弹出层效果：能够传递参数，能够返回值。传递参数比较容易，后来卡在返回值问题上，看了mini ui 的实现，原来contentwindow属性来实现返回值（parent和openr也可以实现父子窗口的相互操作， javascript原生代码也有能够实现类似功能的方法：showmodaldialog）。

原始代码如下：

parent.html

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>全面兼容的Iframe 与父页面交互操作</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
    <script type="text/javascript" src="jquery.1.3.2.js"></script>
    <script type="text/javascript">  
    $(function(){
	document.getElementById('childframe').contentWindow.childFunction();
    });
 </script> 
</head> 
<body> 
<div style="width: 100%; height: 250px;"> 
<iframe id="childframe" name="myiframeA" src="http://localhost:8080/b.html" scrolling="no" frameborder="0"></iframe> 
</div> 
</body> 
</html>

child.html

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>全面兼容的Iframe 与父页面交互操作</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <script language="javascript" type="text/javascript">  
        function childFunction() {  
            alert("childframe");  
        }  
    </script>  
</head>  
<body>    
</body>  
</html>

这是的效果是控制台一直报错：childFunction is not a function .这时我一直以为是浏览器兼容的问题。但是查了资料都说contentwindow属性是所有浏览器都兼容的，各个浏览器调试这个对象也是兼容的。后来在网上看到一个博客说要在onload 方法中才能调用iframe中的方法。后来试结果可以。

parent.html修改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>全面兼容的Iframe 与父页面交互操作</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
    <script type="text/javascript" src="jquery.1.3.2.js"></script>
    <script type="text/javascript">  
       
	function init() {
	    document.getElementById('childframe').contentWindow.childFunction();
	}

    </script>  
</head>  
<body onload="init()">    
	<div style="width: 100%; height: 250px;">  
	   <iframe id="childframe" name="myiframeA" src="http://localhost:8080/b.html" scrolling="no" frameborder="0"></iframe>
	</div>  
</body>  
</html>

为什么会产生这种原因？原博主解释大概是iframe中的属性（childFunction()）还没有加载完，详情查看onload方法和$.ready();的执行先后和时间。自己也验证了一下：在即将执行前断点调试图：

直接调用时：