HTML5之window.postMessage实现跨域传递消息

最新推荐文章于 2023-12-17 15:02:11 发布
最新推荐文章于 2023-12-17 15:02:11 发布
阅读量1.3k 收藏
点赞数
分类专栏： Web 文章标签： 跨域调用
在做项目时，遇到了操作iframe的相关问题。业务很简单，其实就是在操作iframe内部某个窗体时，调用父窗体的一个函数。于是就写了两个很简单的htm页面用来测试，使用网上流行的方法在谷歌浏览器中始终报错，不能通过。

父页面parent.html的代码如下

[html]  view plain copy
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head><title>   
  3. </title>  
  4. <script src="jquery-1.10.1.min.js" type="text/javascript"></script>   
  5. <script type="text/javascript">       
  6.         function    ParentFunction() {  
  7.            alert('ParentFunction');          
  8.         }  
  9.      
  10.     </script></head>  
  11. <body>  
  12.  <input type="button" id="btnCancel" class="button" value="测试"  />   
  13.  <iframe id="FRMdetail"  name="FRMdetail" frameborder="0"  src='child.html' style="width:100%;height:100%;" ></iframe>  
  14. </body>  
  15. </html>  


子页面child.html的代码如下

[html]  view plain copy
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head><title>   
  3. </title>  
  4. <script src="jquery-1.10.1.min.js" type="text/javascript"></script>   
  5.  <script type="text/javascript">  
  6.         $(document).ready(function () {  
  7.             $("#btnTest").click(function (e) {        
  8.               var t=window.parent;             
  9.                  t.ParentFunction();  
  10.             });  
  11.         })    
  12.     </script></head>  
  13. <body>  
  14.  <input type="button" id="btnTest" class="button" value="应该获取的值"  />rrr  
  15. </body>  
  16. </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]  view plain copy
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head><title>   
  3. </title>  
  4. <script src="jquery-1.10.1.min.js" type="text/javascript"></script>   
  5. <script type="text/javascript">   
  6.        this.ParentFunction= function() {//和注释掉的方法是一样的，也就是说加不加this都是一样的，因为此处的this就是windows  
  7.            alert('ParentFunction');          
  8.         }  
  9.  //     function    ParentFunction() {  
  10.   //         alert('ParentFunction');          
  11.  //       }   
  12.      function receiveMessage(e) {  
  13.         var data = e.data;   //获得传递的值 
  14.         ParentFunction() ; 
  15.          //if(data=="ParentFunction")  
  16.          //{  
  17.          //  ParentFunction() ;  
  18.          //}         
  19.       }  
  20.       if (typeof window.addEventListener != 'undefined') {//使用html5 的postMessage必须处理的  
  21.       window.addEventListener('message', receiveMessage, false);  
  22.    } else if (typeof window.attachEvent != 'undefined') {  
  23.      window.attachEvent('onmessage', receiveMessage);  
  24.   }    
  25.     </script></head>  
  26. <body>  
  27.  <input type="button" id="btnCancel" class="button" value="测试"  />   
  28.  <iframe id="FRMdetail"  name="FRMdetail" frameborder="0"  src='child.html' style="width:100%;height:100%;" ></iframe>  
  29. </body>  
  30. </html>  

子页面child.html的代码如下

[html]  view plain copy
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head><title>   
  3. </title>  
  4. <script src="jquery-1.10.1.min.js" type="text/javascript"></script>   
  5.  <script type="text/javascript">  
  6.         $(document).ready(function () {  
  7.             $("#btnTest").click(function (e) {        
  8.               var t=window.parent;  
  9.               if(!t.ParentFunction)//在不支持时，使用html5 的postMessage方法 ，第一个参数是需要传递的值
  10.               {            
  11.                 t.postMessage("ParentFunction", '*');               
  12.               }  
  13.               else  
  14.               {   
  15.                  t.ParentFunction();                
  16.               }  
  17.             });  
  18.         })    
  19.     </script></head>  
  20. <body>  
  21.  <input type="button" id="btnTest" class="button" value="应该获取的值"  />rrr  
  22. </body>  
月色无痕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
window.postMessage()实现跨域消息传递
qq_45745319的博客
03-09 1207
window.postMessage()实现跨域消息传递
HTML5 之跨域通讯（postMessage）
Jartto's Blog
06-11 771
很多情况下，我们受到浏览器的安全策略限制。如何能规避此限制，并且能安全的使用跨域通讯，这就不得不介绍一下 postMessage 了。 一、关于 postMessagewindow.postMessage() 方法可以安全地实现跨源通信。 通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值...
window的message事件
热门推荐
ASD1415926的专栏
10-29 2万+
在HTML5中新增了postMessage方法，postMessage可以实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。 该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。
利用HTML5的window.postMessage实现跨域通信
aini_zlr2008的博客
09-10 361
4.HTML5的window.postMessage简述 postMessage是html为了解决跨域通信，特别引入的一个新的API，目前支持这个API的浏览器有：Firefox, IE8+, Opera, Safari, Chrome。postMessage允许页面中的多个iframe/window的通信，postMessage也可以实现ajax直接跨域，不通过服务器端代理。 感谢苏...
window.postMessage()实现跨域通信和页面间数据通信
江拥羡橙的博客
06-02 1169
window.postMessage() 方法可以安全地实现跨域通信和页面间数据通信。postMessage 可用于解决以下方面的问题：页面和其打开的新窗口的数据传递页面与嵌套的 iframe 消息传递多窗口之间消息传递接口参数。
【前端知识点】跨域之跨域window.postMessage
chaunceyw的博客
09-12 1230
window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机  (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用
window.postMessage - 前端跨域通信
陈坚泓的博客
08-08 3344
前端跨域通信
Html5 postMessage实现跨域消息传递
09-28
【Html5 postMessage实现跨域消息传递】 在Web开发中，由于浏览器的同源策略，不同源的网页之间无法直接通信，这限制了开发者在处理跨域数据交换时的灵活性。同源策略是为了保障Web安全而设定的一项核心规则，防止...
HTML5如何用window.postMessage在网页间传递数据
08-23
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个...
html5 postMessage解决跨域、跨窗口消息传递方案
09-27
HTML5的`postMessage` API是为了解决Web开发中跨域、跨窗口通信的问题而设计的。在传统的Web开发中，由于同源策略的限制，不同源的页面或者窗口之间无法直接进行通信，但`postMessage`提供了一个安全且灵活的解决...
HTML5 window/iframe跨域传递消息 API介绍
09-28
HTML5的`window.postMessage` API 是一种允许不同源的窗口或`iframe`之间安全地进行跨域通信的技术。这一功能的引入解决了之前由于同源策略限制导致的跨域数据交换问题，无需服务器端的额外配合。 `window.post...
postMessage解决跨域、消息传递（平台嵌入其他项目，需要相互发送接受消息）
CC酱写前端的博客
12-17 806
postMessage解决跨域、消息传递（平台嵌入其他项目，需要相互发送接受消息）
window.postMessage实现跨域
小葵坤_易安的博客
09-14 780
一、发送消息 otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow：其他窗口的一个引用，如iframe的contentWindow属性、Window.open、Window.opener、Window.parent、Window.frames +索引值。 message：将要发送到其他 window...
postmessage解决跨域
_QIuXiaoYi的博客
11-26 2172
使用window.postmessage其相关消息事件在两个页面之间发送消息来解决跨域。 方法 var frame = document.getElementById('your-frame-id'); frame.contentWindow. postMessage (data, '*'); //data为要传递的值可以是string，boolean，number，array，object 在iframe子页面使用如下方法 window. addEventListener ('message'
html里面iframe实现跨域与主页面通信
qqRZL的博客
06-09 1014
);在主页面上，可以使用来监听来自不同源的页面发送的消息。当监听到消息时，可以在回调函数中处理消息内容event.data。需要在主页面的监听函数中检查来源地址是否正确，这样防止页面被恶意注入代码，保障安全性。注意：在使用方法传递数据时，数据可以是任何 JS 支持的数据类型，包括字符串、数字、布尔值、对象、数组等，但不支持函数或 DOM 节点对象等引用类型。传递引用类型的数据可以先使用方法序列化为字符串，然后在接收端使用方法进行反序列化。以上就是基于方法实现跨域通信的基本流程。
Uncaught (in promise) DOMException: Failed to execute ‘postMessage‘ on ‘Window‘: [object Object]
老衲的少女心i~
04-25 7725
背景介绍： 当前项目是一个由angular重构为vue的类型，在angular界面中，开发vue的功能，并通过iframe的方式嵌入到我们的angular项目中。我在子界面找那个想调用父界面的组件，传入信息，处理数据。子界面中通过data: data})传递信息到父界面。但是，我在子界面中(这个是嵌入的iframe界面)，想向父界面传递消息的时候，报错，父界面无法正常接收提示：以下是本篇文章正文内容，下面案例可供参考主要是对postMessaga的传递信息的一些结构化的理解，需要加深。
window.postMessage的使用案例
个人学习笔记，勿喷!!
11-27 3326
window.postMessage的使用案例
某大型集团管控制度流程.docx
最新发布
08-17
某大型集团管控制度流程.docx
window.postMessage实现跨域传参
07-15
window.postMessage是一种跨域通信的方法，它可以让不同域名的页面之间进行安全的消息传递。通过该方法，一个页面可以向另一个页面发送消息，而不需要知道对方的具体实现细节。这种方法可以用于实现单点登录、跨域数据共享等功能。但需要注意的是，该方法需要在两个页面之间建立信任关系，否则可能会被恶意利用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值