如何在html5中使用postMessage解决跨域通信

本篇文章给大家分享的是有关如何在html5中使用postMessage解决跨域通信,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

10年积累的成都网站设计、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有双湖免费网站建设让你可以放心的选择与我们合作。

postmessage解析HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow: 其他窗口的一个引用, 比如IFRAME的contentWindow属性, 执行,window.open返回的窗口对象. message: 将要发送到其他窗口的数据. targetOrigin:通过窗口的origin属性来指定哪些窗口能接收到消息事件, 其值可以是字符”*”(表示无限制)或者一个URL transfer:是一串和message同时传递的Transferable对象. 这些对象的所有权将被转移给消息的接收方, 而发送一放将不再保有所有权.element.addEventListener(event,fn,useCaption ); 三个参数 event 事件 比如click mouseenter mouseleave 回调函数 useCaption用于描述是冒泡还是捕获。默认值是false,即冒泡传递。 当值为true,就是捕获传递。实现方式

主界面 main.html




  
  
  
  跨域数据访问
  
         window.addEventListener('message',function(e){
           console.log("e--->",e);
           const data = e.data;
           document.getElementById('main1').style.backgroundColor=e.data;
         },false)

  


  
     我是主界面,等待接收iframe的传递
  
        iframe         

iframe界面




  
  
  
  Document
    
           html,body{
               height:100%;
               margin:0px;
           }
    

  
        
           点击改变颜色
        
                      function changeColor(){                var frame = document.getElementById('frame');                var color=frame.style.backgroundColor;                if(color=='rgb(204, 102, 0)'){                    color='rgb(204, 204, 0)';                }else{                    color='rgb(204,102,0)';                }                 console.log("frame===>",frame);                 console.log("color",color);                frame.style.backgroundColor=color;                window.parent.postMessage(color,'*');              }            

以上就是如何在html5中使用postMessage解决跨域通信,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


当前文章:如何在html5中使用postMessage解决跨域通信
网页路径:http://pwwzsj.com/article/jeggho.html

其他资讯