js操作iframe兼容各种浏览器

最新推荐文章于 2023-04-20 20:28:07 发布

xuexiaodong2009

最新推荐文章于 2023-04-20 20:28:07 发布

阅读量8.3k

点赞数 4

分类专栏： js html JavaScript 学习

本文链接：https://blog.csdn.net/xuexiaodong009/article/details/9408045

版权

js 同时被 3 个专栏收录

73 篇文章 0 订阅

订阅专栏

JavaScript 学习

25 篇文章 12 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

在做项目时，遇到了操作iframe的相关问题。业务很简单，其实就是在操作iframe内部某个窗体时，调用父窗体的一个函数。于是就写了两个很简单的htm页面用来测试，使用网上流行的方法在谷歌浏览器中始终报错，不能通过。

父页面parent.html的代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> 
</title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 	  
    	function	ParentFunction() {
           alert('ParentFunction');        
        }
   
    </script></head>
<body>
 <input type="button" id="btnCancel" class="button" value="测试"  /> 
 <iframe id="FRMdetail"  name="FRMdetail" frameborder="0"  src='child.html' style="width:100%;height:100%;" ></iframe>
</body>
</html>

子页面child.html的代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> 
</title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
 <script type="text/javascript">
        $(document).ready(function () {
            $("#btnTest").click(function (e) {	  	
			  var t=window.parent;			 
			     t.ParentFunction();
            });
        })	
    </script></head>
<body>
 <input type="button" id="btnTest" class="button" value="应该获取的值"  />rrr
</body>
</html>

网络上流行的方法 var t=window.parent; t.ParentFunction();在IE中能调用，可是在谷歌浏览器中总是提示如下错误，

Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

网上找了很长时间都没法发现方法，有的也是很早以前的版本，基本上没用了，而且人云亦云，基本上没有测试过。于是自己摸索，后来才发现，谷歌浏览器其实那种方法其实也可以，只是很奇怪，必须发布后才可以，在文件系统中调用，就会出现上边的错误。

其实还有一种html5的方法postMessage，于是就根据着进行了改写，最终代码如下：

父页面parent.html的代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> 
</title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
	   this.ParentFunction= function() {//和注释掉的方法是一样的，也就是说加不加this都是一样的，因为此处的this就是windows
           alert('ParentFunction');        
        }
 //   	function	ParentFunction() {
  //         alert('ParentFunction');        
 //       }	
	 function receiveMessage(e) {
	    var data = e.data; 	 
		 if(data=="ParentFunction")
		 {
		   ParentFunction() ;
		 }       
      }
      if (typeof window.addEventListener != 'undefined') {//使用html5 的postMessage必须处理的
      window.addEventListener('message', receiveMessage, false);
   } else if (typeof window.attachEvent != 'undefined') {
     window.attachEvent('onmessage', receiveMessage);
  }  
    </script></head>
<body>
 <input type="button" id="btnCancel" class="button" value="测试"  /> 
 <iframe id="FRMdetail"  name="FRMdetail" frameborder="0"  src='child.html' style="width:100%;height:100%;" ></iframe>
</body>
</html>

子页面child.html的代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title> 
</title>
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
 <script type="text/javascript">
        $(document).ready(function () {
            $("#btnTest").click(function (e) {	  	
			  var t=window.parent;// var t = window.opener;
			  if(!t.ParentFunction)//在不支持时，使用html5 的postMessage方法
			  {			 
			    t.postMessage("ParentFunction", '*');			  
			  }
              else
			  { 
			     t.ParentFunction();			  
			  }
            });
        })	
    </script></head>
<body>
 <input type="button" id="btnTest" class="button" value="应该获取的值"  />rrr
</body>
</html>

经过改写后，在文件系统中虽然也会出现那个错误，但需要调用的方法确实调用了，目的确实达到了，不影响使用了。

xuexiaodong2009

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
js操作iframe兼容各种浏览器

在做项目时，遇到了操作iframe的相关问题。业务很简单，其实就是在操作iframe内部某个窗体时，调用父窗体的一个函数。于是就写了两个很简单的htm页面用来测试，使用网上流行的方法在谷歌浏览器中始终报错，不能通过。
复制链接

扫一扫