vscode live server 模拟父子iframe通信

951 阅读1分钟

父子iframe通信可通过postMessage方法实现,这里没做过多探究,纯粹好玩。

1. 启动vscode分别打开两个页面:main.html和iframepage.html

main.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>iframe+postMessage 跨域通信 主页面</title>
</head>

<body>
  <h1>主页面</h1>
  <div>
    <h2>主页面接收消息区域</h2>
    <span id="message"></span>
  </div>

  <iframe id="child" src="http://127.0.0.1:5501/iframepage.html"></iframe>
</body>
<script>
  window.onload = function () {
    document.getElementById('child')
      .contentWindow.postMessage("主页面消息", "http://127.0.0.1:5501/iframepage.html")
  }
  window.addEventListener('message', function (event) {
    document.getElementById('message').innerHTML = "收到"
      + event.origin + "消息:" + event.data;
  }, false);

</script>

</html>

iframepage.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>iframe+postMessage跨域通信 子页面</title>
</head>

<body>
  <h2>子页面</h2>
  <div>
    <h3>接收消息区域</h3>
    <span id="message"></span>
  </div>
</body>
<script>
  window.addEventListener('message', function (event) {
    console.log(event);
    document.getElementById('message').innerHTML = "收到"
      + event.origin + "消息:" + event.data;
  }, false);
  top.postMessage("子页面消息收到", 'http://127.0.0.1:5500/main.html')
</script>

</html>

2. 安装live server,启动live server

3. 执行效果