跨页面通信postMessage和onmessage

简介

通常,对于两个不同页面的,只有当它们位于同协议、同域名、同端口时,才可以通信。而window.postMessage() 方法可以安全地实现跨源通信。

语法

发送:

otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow

其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象,或者父窗口的引用 window.opener

message

将要发送到其他 window的数据,可以是字符串也可以是对象。

targetOrigin

origin属性可以指定哪些窗口能接收到消息事件,格式为:协议+域+端口,如果设为 “*” 表示无限制,为了安全最好别设置为 “ * ”

接收:

window.onmessage = function(e){  
    console.info("received msg: " + e.data);
    console.info("received msg: " + e.origin);
    console.info("received msg: " + e.source);
}
data

传过来的数据

origin

发送方窗口的origin

source

发送方窗口对象的引用,可以使用这个引用双向发消息

举例

在demo1页面有一个iframe,它的src指向demo2页面

从demo1发送一条消息给demo2,demo2收到消息后回复demo1消息:收到了

demo1

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1title>
head>
<body>
<iframe id="iframe" border="0"  src="http://192.168.1.210:8080/demo2.html">iframe>

<br><br><br><br>
<hr>
<br><br><br><br>

<button onclick="pushMessage()">发送消息给iframebutton>
<br><br>
<div style="padding: 20px;border:1px solid green;">
    <span>ifram返回的消息为:span>
    <p id="msg">p>
div>

<script>
    function pushMessage(){
        document.getElementById('iframe').contentWindow.postMessage("你好啊","http://192.168.1.210:8080")
    }

	// 接收iframe返回的消息
    window.onmessage = function (e) {
        document.getElementById('msg').innerText = e.data
    }
script>
body>
html>
demo2

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2title>
head>
<body style="padding:20px;border: 1px solid red;">
    <span>iframe收到的消息为:span>
    <p id="msg">p>

<script>
    window.onmessage = function (e) {
        console.info("received from A is: " + e.data);
        document.getElementById('msg').innerText = e.data

        // 发送方窗口对象的引用
        var pWindow = e.source
		// 回复父窗口消息
        pWindow.postMessage("收到了","http://192.168.1.210:8080")
    }
script>
body>
html>
运行后的效果图:

跨页面通信postMessage和onmessage_第1张图片

你可能感兴趣的:(前端)