使用postMessage实现跨窗口消息传递

为什么80%的码农都做不了架构师?>>>   hot3.png

检测浏览器支持

    不同版本的浏览器对postMessage的支持可能不同,因此使用前需要检测。在chrome浏览器中的一种比较简单的方法就是直接在开发者工具中输入window.postMessage,如果结果如下,说明支持

     使用postMessage实现跨窗口消息传递_第1张图片

使用postMessage 发送消息

    postMessage的语法 :window.postMessage(data,url)

  • data:发送的消息,通常为字符串

  • url:指定允许通信的域名。注意,不是接受消息的目标域名。使用该参数的主要作用是出于安全考虑,接受消息的窗口可以根据此消息来判断信息来源是否可靠,避免恶意攻击。如果不对访问的域进行判断可以使用‘*’。

跨窗口消息传递实例

    1.目标:使用框架实现左边发送消息,右边显示发送的消息

    2.效果图:

使用postMessage实现跨窗口消息传递_第2张图片

使用postMessage实现跨窗口消息传递_第3张图片

3.代码实现

1)index.html





跨框架发送消息







<body>
<p>您的浏览器不支持框架</p>
</body>


主页面布局比较简单,主要是使用了frame框架,引入左右两个html文件

2)left.html





left

//程序首先获取文本框的内容,然后使用右侧框架窗口对象调用postMessage()向右侧框架发送消息
function send(){
var message=document.querySelector("input[type = 'text']").value;
window.parent.frames[1].postMessage(message,'*');
//window.parent.pastMessage用于向父窗口发送消息,frames[1]表示要发送的框架,*表示不对访问的域进行判断
}



这是框架的左部,点击发送消息

left.html的布局也是很简单的,就一个输入框和发送按钮,主要是调用了window.parent.postMessage向父窗口传递消息

3)right.html





left


这是框架的右部,用于接收来自左侧的消息

var elebox = document.querySelector("#message"); //事件处理函数 //e.data是接受到的数据 //e.origin是传送源,如果postMessage()第二个参数为*则返回undefined。 //可以根据e.origin的值来判断是否为安全的源 var messageHandle=function(e){ elebox.innerHTML += e.data+"
"; };  //监听postMessage发送的消息事件,并对其中包含的数据进行处理。 if(window.addEventListener){ window.addEventListener("message",messageHandle,false); }else if(window.attachEvent){ window.attachEvent("onmessage",messageHandle); }

    right.html主要是接受消息的,需要监听消息事件,并处理。

    如果使用addEventListener方法,则需要监听message事件

window.addEventListener("message",messageHandle,false);

    如果使用attachEvent方法,则需要监听onmessage事件

window.attachEvent("onmessage",messageHandle);


转载于:https://my.oschina.net/lgr6/blog/663685

你可能感兴趣的:(使用postMessage实现跨窗口消息传递)