otherWindow.postMessage(message, targetOrigin, [transfer])方法实现 与iframe通信

*IE有兼容问题

api参考MDN

index.html页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .green {
  11.             padding: 10px;
  12.             border: 1px solid green;
  13.             margin-bottom: 20px;
  14.         }
  16.         #frame {
  17.             width: 100%;
  18.         }
  19.     </style>
  20. </head>
  22. <body>
  23.     <div class="green">
  24.         <p> 父页面信息</p>
  25.         <button id='btn'>向子传参</button>
  26.         <div id='yy'>
  27.         </div>
  28.     </div>
  29.     <iframe src="./frame.html" id="frame" frameborder="0"></iframe>
  30.     <script>
  31.         var yy = document.querySelector('#yy')
  32.         // 父页面接收子页面的参数
  33.         window.addEventListener('message', function (e) {
  34.             console.log(e)
  35.             yy.innerHTML = e.data.a
  36.         })
  37.         // 父页面传给子页面的参数
  38.         var btn = document.querySelector('#btn')
  39.         btn.addEventListener('click', function (e) {
  40.             var contentWindow = document.querySelector('#frame').contentWindow
  41.             contentWindow.postMessage({ b: '父传给子的' }, '*')
  42.         })
  43.     </script>
  44. </body>
  46. </html>

frame.html页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .red {
  11.             padding: 10px;
  12.             border: 1px solid red;
  13.         }
  14.         body{
  15.             margin: 0;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <div class="red">
  22.         <p>子页面信息</p>
  23.         <button id='btn'>向父传参</button>
  24.         <div id="p">
  26.         </div>
  27.     </div>
  30.     <script>
  31.         var btn = document.querySelector('#btn')
  32.         btn.addEventListener('click', function (e) {
  33.             // 子页面向父传参数
  34.             window.parent.postMessage({ a: '子页面传给父页面的' }, '*')
  35.             // window.open('https://www.baidu.com/')
  36.         })
  37.         var p = document.querySelector('#p')
  38.         //子页面接收父页面的参数
  39.         window.addEventListener('message', function (e) {
  40.             p.innerHTML = e.data.b
  41.         })
  42.     </script>
  43. </body>
  45. </html>