使用iframe的postmessage，实现不同站点跨域通信。

2021-07-24 500 阅读1分钟

A站点a页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>site name</title>
  </head>
  <body>
      <iframe
        src="B页面URL"
        name="test"
        scrolling="no"
        width="600"
        height="600"
        frameBorder="0"
      />
      <script type="text/javascript" src="a.js"></script>
  </body>
</html>

a.js

// 注册事件receiveMessage，接收子frame的信息
window.addEventListener('message', receiveMessage, false)
function receiveMessage (event) {
  const data = event.data
  if (data) {
    // write your code
  }
}
// 向子frame发送信息
window.frames['test'].postMessage(
  {
    data: true
  },
  '*'//调试时可以写*号，上线后需要设置哪些域可以接收到message
)

B站点b页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>site name</title>
  </head>
  <body>
      <script type="text/javascript" src="b.js"></script>
  </body>
</html>

b.js

// 向父frame发送消息
window.parent.postMessage(
{
  token: token,
},
"*" //调试时可以写*号，上线后需要设置哪些域可以接收到message
);
// 注册事件receiveMessage，与父frame通信
window.addEventListener('message', receiveMessage, false)
function receiveMessage (event) {
  const data = event.data
  if (data) {
    // write your code
  }
}