postMessage

Kosmos 发布于2019-08-21 17:33 / 1574人阅读

摘要：引入的的可以更方便有效安全的解决页面与嵌套的消息传递多窗口之间消息传递跨域数据传递等问题下面简单介绍一下的使用流程。

html5引入的message的API可以更方便、有效、安全的解决:

页面与嵌套的iframe消息传递

多窗口之间消息传递

跨域数据传递等问题

下面简单介绍一下postMessage的使用流程。

iframe 中使用：

postMessage两个参数，第一个传递的信息(如果是对象，最好JSON.stringify下)，第二个targetOrigin（指定消息传递的地方，如果是*就是匹配所以的源）

var postMessage = "info";
top.postMessage({hash: postMessage}, "*"); // 这里的TOP是获取的顶层，即有多层嵌套iframe的时候使用; top 即是window.top; 如果是直接的父级，就是window.parent

父页面中使用:

window.addEventListener("message", function (event) {
        const data = event.data.hash;
        self.src = src + data;
        const path = "/monitor/index" + data;
        self.$router.push({path: path})
}, false);

海外云主机私有云 postmessage

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

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

iframe+postMessage实现跨域通信

摘要：前言需求背景最近开发管理系统，需要在本页面跳转到一个图片管理系统上传图片，上传成功后返回图片链接，然后返回管理系统，显示图片实现思路上传图片时，需要在本窗口跳转到图片管理系统，并且两个系统之间要通信考虑到两个系统是不同的端口号，存在跨域问题前言需求背景：最近开发管理系统，需要在本页面跳转到一个图片管理系统上传图片，上传成功后返回图片链接，然后返回管理系统，显示图片实现思路： ...

Youngdze 2019-08-22 17:17 评论0 收藏0
利用window.postMessage()实现跨域消息传递（JavaScript）

摘要：说明方法可以安全地实现对象之间的跨域通信。接收窗口随后可根据需要自行处理此事件。传递给的参数通过事件对象暴露给接收窗口。发送端程序发送消息的基本语法就是接收消息的窗口的引用。接收程序度空间从接收消息从收到消息演示地址跨域消息传递说明 window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的...

VincentFF 2019-08-22 15:13 评论0 收藏0
postMessage处理iframe 跨域问题

摘要：四传递信息给父页面参考跨域子页面传给父页面父页面代码崔涣测试父页面参数中有属性，就是父窗口发送过来的数据把父窗口发送过来的数据显示在子窗口中。五简单分析和安全问题传送过来的信息如下图，几乎包含了所有应该有的信息。背景：由于同源策略存在，javascript的跨域一直都是一个棘手的问题。父页面无法直接获取iframe内部的跨域资源；同时，iframe内部的跨域资源也无法将信息直接传递给...

cooxer 2019-08-19 17:42 评论0 收藏0
如何提升JavaScript的任务效率？学会后教给你同事

摘要：的作用，就是为创造多线程环境，允许主线程创建线程，将一些任务分配给后者运行。在主线程运行的同时，线程在后台运行，两者互不干扰。等到线程完成计算任务，再把结果返回给主线程。如果发生错误，会触发主线程的事件。本文由云+社区发表一、概述 JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计...

SimonMa 2019-08-23 14:07 评论0 收藏0
如何提升JavaScript的任务效率？学会后教给你同事

摘要：的作用，就是为创造多线程环境，允许主线程创建线程，将一些任务分配给后者运行。在主线程运行的同时，线程在后台运行，两者互不干扰。等到线程完成计算任务，再把结果返回给主线程。如果发生错误，会触发主线程的事件。本文由云+社区发表一、概述 JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计...

hot_pot_Leo 2019-08-16 14:01 评论0 收藏0