前端提高篇(116):简单了解postMessage通信

1.背景

还是跨域问题，之前提到JSONP时，提到了src不受跨域影响的特性，可以来实现跨域获取不同源的资源
当时主要用了script的src来做JSONP的案例

这次对iframe举例，来了解postMessage的基本使用

先是同源案例，可以通过iframe获取同源页面的变量
在index.html引入demo.html

index.html页面中的内容是：

page:index!
<button class="btn">btn</button>
<iframe src="./demo.html" style="border: 1px solid #ccc" frameborder="0" name="demo"></iframe>

demo.html页面中的内容是：

page:index!
<script>
    var a = 123;
</script>

index.html为父页面，demo.html为子页面

父页面取子页面的变量，需要等子页面加载完成

console.log(window.frames['demo'].a); // undefined

window.onload = function (){
    console.log(window.frames['demo'].a); // 123
}

var oBtn = document.getElementsByClassName('btn')[0];
oBtn.onclick = function () {
    console.log(window.frames['demo'].a); //123
}

如果是跨域了，浏览器是不允许随便获取不同源的页面的变量资源的，只能显示该页面

postMessage

1.postMessage发送数据之后需要监听message事件，当接收数据就触发这个事件，传过来的对象，记为messageEvent，其中data属性存储了接收的数据，origin和currentTarget属性均存储着发送消息的对象

2.想要在父页面与子页面中传点数据，需要父页面与子页面都允许

好文链接

父页面给子页面传递

功能：父页面的input输入内容，点击btn按钮，发送到子页面并输出，
注意点：
1.需要在父页面中找到子页面，这里借助iframe的name属性，子页面的name为demo，子页面为window.frames['demo']
2.子页面接收到消息，也需要判断一下是否是可信任的网站发过来的，避免假网站或其他页面混传数据

父页面：

page:index!
<input type="text" class="input">
<button class="btn">btn</button>

使用postMessage：

var oInput = document.getElementsByClassName('input')[0];
var oBtn = document.getElementsByClassName('btn')[0];
oBtn.onclick = function () {
    var val = oInput.value;
    window.frames['demo'].postMessage(val, 'http://localhost'); //将值传给子页面
}

子页面：

// 当接收到postMessage消息，会触发message事件，接收的内容存在messageEvent.data中
window.addEventListener('message', function(messageEvent){
    // 如果是父页面给自己传值，就做处理，避免假网站盗取数据
    // if条件还可写成：messageEvent.origin == "自己设置的父页面"
    if(messageEvent.currentTarget == parent){
        console.log( messageEvent.data );
    }
    
})

子页面给父页面传递

功能：当点击子页面的btn按钮，将子页面a变量的值传给父页面
注意点：
1.给父页面传值，需要找到父页面：window.parent，再使用postMessage方法
2.父页面也需要判断是哪一个子页面给自己传值

子页面：

<button class="btn">btn</button>
<script>
    var a = 123;
    window.addEventListener('message', function(messageEvent){
        console.log( messageEvent.data );
    })

    var oBtn = document.getElementsByClassName('btn')[0];
    oBtn.onclick = function(){
        window.parent.postMessage(a, '父页面的协议+域名+端口(默认80可省略)')
    }
</script>

父页面监听message事件：

window.addEventListener('message', function(messageEvent){
    if (messageEvent.origin == "父页面的协议+域名+端口(默认80可省略)"){
        console.log(messageEvent.data)
    }
})

如果子页面不想处理任何postMessage发送过来的数据，不要监听message事件即可