html5: postMessage解决跨域通信的问题

Freeman 发布于2019-08-02 11:17 / 2768人阅读

摘要：默认值是，即冒泡传递。当值为，就是捕获传递。实现方式主界面跨域数据访问我是主界面等待接收的传递界面点击改变颜色

效果图

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
    

  
        
           点击改变颜色

GPU云服务器云服务器解决问题的方法云计算解决的问题短视频问题的解决措施数据分析解决的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52892.html

杂谈：前端Web通信

摘要：作为开发同学的小伙伴客户端的浏览器，有点小调皮还做了一个同源策略的限制，当我们的数据请求遇到不同源的情况下跨域，我们就得尝试其它的通信方法，不能一条道走到黑。 showImg(https://segmentfault.com/img/bVburZO?w=600&h=450); Web2.0以来，Ajax的出世，解决了传统表单提交页面跳转，闪烁白屏等问题。使得Web页面可以实现局部更新，...

Betta 2019-08-23 10:29 评论0 收藏0
利用html5的postmessage解决iframe跨域问题的库cross-domain.js，使

摘要：简介一个利用的跨域解决一个系统中，多个跨域通信交互的库。然而各系统采用了不同的域名，与主框架系统和其它业务系统有跨域问题若将所有域名改为同一域名下可能会产生一些系统间页面元素和样式的冲突故采用了标准下的来解决该问题。简介一个利用html5的跨域api postMessage解决一个系统中，多个iframe跨域通信交互的js库。 github地址：cross-domain 背景最...

I_Am 2019-08-22 18:25 评论0 收藏0
【跨域】跨域的简易实现和测试

摘要：前言由于自己平时只做做，并没有遇到太多跨域问题，今天通过几个样例模拟实现了几种跨域方式。前言由于自己平时只做做demo，并没有遇到太多跨域问题，今天通过几个样例模拟实现了几种跨域方式。原文地址传送门本文所有样例静态服务器基于nodejs实现，代码亲测可用。测试步骤如下： 1.为了实现跨域访问的效果，需要下载http-server 作为一个服务器 npm install http...

ninefive 2019-08-22 11:07 评论0 收藏0