两个页面 传递数据 / 通信

2018-07-13  本文已影响0人  智勇双全的小六

参考教程

http://www.webhek.com/post/window-postmessage-api.html
https://www.cnblogs.com/dolphinX/p/3464056.html

一 发送消息

api:window.postMessage
window.postMessage 的功能是允许在两个窗口/frames 间发送数据信息。有点类似于跨域的 AJAX,但是不能与服务器之间交互。

1.1 用法

postMessage(data, origin)

一般来说,data 只要是 js 基本类型就可以,但是有的浏览器不支持,所以最好是json。
origin,指明目标窗口的源,即domain。如果是传递给所有窗口,可以使用 "*",如果和当前窗口同源可以使用“/”

window.postMessage("aa",domain)

二 接受消息
监听 window 的 message 事件就可以。

window.addEventListener('message',function(e){
                if(e.source!=window.parent) return;
                var color=container.style.backgroundColor;
                window.parent.postMessage(color,'*');
            },false);

参数 e 有三个属性:

上一篇下一篇

猜你喜欢

热点阅读