iframe跨站通信 

1.先创建index.html页面
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index</title>
</head>
<body style="border:5px solid #333;">

  <h1>this is index</h1>

  <iframe src="./iframePage.html" id='myframe'></iframe>

  <script>
    //获取iframe元素
    iFrame = document.getElementById('myframe')
    //iframe加载完毕后再发送消息，否则子页面接收不到message
    iFrame.onload = function(){
      //iframe加载完立即发送一条消息
      iFrame.contentWindow.postMessage('MessageFromIndex1','*');
      //iframe加载完再延迟1000ms发送一条消息
      setTimeout(()=>{
        iFrame.contentWindow.postMessage('MessageFromIndex2','*');
      },1000)
    }
    //回调函数
    function receiveMessageFromIframePage (event) {
        console.log('receiveMessageFromIframePage', event)
    }
    //监听message事件
    window.addEventListener("message", receiveMessageFromIframePage, false);
  </script>
</body>
</html>
2.创建iframePage.html页面
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>iframePage</title>
</head>
<body style="border:5px solid #333;">

  <h1>this is iframePage</h1>

  <script>
    //给父页面发送消息
    parent.postMessage( {msg: 'MessageFromIframePage'}, '*');
    //回调函数
    function receiveMessageFromIndex ( event ) {
      console.log( 'receiveMessageFromIndex', event )
    }
    //监听message事件
    window.addEventListener("message", receiveMessageFromIndex, false);
  </script>
</body>
</html>

作者：余震

链接：https://rockjins.js.org/2017/05/05/2017-05-05-iframe-cross-domain-Communication/

posted @ 2017-10-30 11:16  虫虫儿  阅读(164)  评论(0)    收藏  举报