iframe+postMessage跨域访问

小知识，大挑战！本文正在参与“ 程序员必备小知识 ”创作活动

在实际的开发中，我们可能会遇到在a项目中嵌套b项目的页面，再比如一些门户网站，当在这个网站中要包含一些其他的项目的时候，也可以采用这种方式，在不同的域名之间传递token等信息进行通信。

起了进程两个来模拟这个通信

父界面的地址为：http://192.168.169.1/test

子界面的地址为：http://192.168.169.1:81/test1

父界面向子界面传递信息：

父界面：

	  <h1>主页面</h1>
      <p class="title" @click="handleANew">发送消息</p>
      <iframe id="child" src="http://192.168.169.1:81/test1" style="width: 100%;height: 800px"></iframe>
      <div>
        <h2>主页面接收消息区域</h2>
        <!-- <span id="message"></span> -->
      </div>

	handleANew() { 
      document
        .getElementById("child")
        .contentWindow.postMessage("hhhhh", "http://192.168.169.1:81/test1");
    },

子界面：

	<h2>子页面</h2>
    <div>
      <h3>接收消息区域</h3>
      <span id="message"></span>
    </div>
    
	<script>
	window.addEventListener(
	  "message",
	  function (event) {
	    console.log(event);
	    document.getElementById("message").innerHTML =
	      "收到" + event.origin + "消息：" + event.data;
	  },
	  false
	);
	</script>

在这里插入图片描述点击发送消息之后：

在这里插入图片描述消息就可以传递到子页面了

子界面向父界面传递信息：

子界面：

<script>
    window.addEventListener('message',function(event){
        console.log(event);
        document.getElementById('message').innerHTML = "收到" 
            + event.origin + "消息：" + event.data;
        top.postMessage("子页面消息收到", 'http://192.168.169.1/test')
    }, false);
</script>

父界面：

window.addEventListener('message', function(event){
    document.getElementById('message').innerHTML = "收到" 
        + event.origin + "消息：" + event.data;
}, false);

tip:

1.postMessage和sendMessage（同步）的区分；

2.当使用webpack时 webpack自身会发送postMessage，注意监听message时区分具体是自己发来的message还是webpackOK ;

使用 iframe + postMessage 实现跨域通信（参考链接）