html5中postMessage如何解决跨域通信的问题-创新互联

这篇文章主要介绍html5中postMessage如何解决跨域通信的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联建站-专业网站定制、快速模板网站建设、高性价比贵定网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式贵定网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖贵定地区。费用合理售后完善,十余年实体公司更值得信赖。

具体如下:

效果图:

html5中postMessage如何解决跨域通信的问题

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




  
  
  
  跨域数据访问
  


  

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

iframe

iframe界面




  
  
  
  Document
    

  
        

点击改变颜色

以上是html5中postMessage如何解决跨域通信的问题的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站栏目:html5中postMessage如何解决跨域通信的问题-创新互联
URL链接:http://ybzwz.com/article/pcjes.html