记录-与iframe通信

背景

使用iframe内嵌页的时候，需求是需要给iframe传id

发布者和订阅者（监听者）的api

和web worker的类似，postMessage，onmessage

实际操作

首先弄清楚，双向的关系
iframe通信.png

上代码，方便理解：

  1. // 文件的目录结构：
  2. ├── index.html
  3. └── one-iframe.html

这是主线程：index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>主线程</title>
  6.   <script type="text/JavaScript">
  7.     // 并取得返回的数据
  8.     function sendPost() {
  9.       // 获取id为otherPage的iframe窗口对象
  10.       var iframeWin = document.getElementById("otherPage").contentWindow;
  11.       // 向该窗口发送消息
  12.       iframeWin.postMessage('你要的参数，我给你');
  13.     }
  14.     // 监听跨域请求的返回
  15.     window.addEventListener("message", function(event) {
  16.       console.log(event, event.data);
  17.     }, false);
  18.   </script>
  19. </head>
  20. <body>
  21.   <input type="button" value="发送" onclick="sendPost()">
  22.   <iframe src="./one-iframe.html" id="otherPage"></iframe>
  23. </body>

这是iframe：one-iframe.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>我是iframe</title>
  6.   <script type="text/JavaScript">
  7.     // 监听父窗口发送过来的数据向服务器发送post请求
  8.     window.addEventListener("message", function( event ) {
  9.       console.log(event.data)
  10.       window.parent.postMessage('疯狂处理中... ok已完成'); // 给主程序发消息
  11.     }, false);
  12.   </script>
  13. </head>
  15. <body>
  16. 我是iframe的内容
  17. </body>
  18. </html>

点击按钮后，打印效果如下

iframe-log.png

码字不易，点赞鼓励