窗口间的通信与iframe跨域

# 窗口间的通信与 iframe 跨域

# iframe 跨域场景

1、若需要通讯的两个窗口在同源域名下，则无需跨域。

2、若需要通讯的两个窗口在同一个顶级域名下，可以手动配置两个窗口的域名为该顶级域名，从而实现通讯。代码如下：

document.domain = "localhost";

3、若需要通讯的两个窗口不在同一顶级域名下，则需要使用到 postMessage 方法。

# postMessage

该方法是 window 下的一个方法，用于发送一条消息。

对应的事件是 onmessage 事件。

const recvMsg = event => {
  if (event.origin === "http://localhost:8080") {
    console.log(event.data);
  }
};
window.onmessage = recvMsg;
// 也可以用事件监听
// window.addEventListener("message", recvMsg)

1
2
3
4
5
6
7
8

该方法可以在其他的窗口中调用，而不会产生跨域问题。（安全通讯）

# 获取到不同窗口的 window 对象

1、若是使用 window.open 打开，则可以通过 window.opener 获取到 window 对象。

2、若是使用 iframe 引用，则可以通过使用 window.top 获取到 window 对象。

# 样例

1、同顶级域名 localhost 域名index.html

<!DOCTYPE html>
<html>
  <body>
    <iframe src="http://localhost:8080/iframe.html" frameborder="0"></iframe>
    <script>
      document.domain = "localhost";
      window.list = [];
      window.setValue = (key, value) => {
        window[key] = value;
      };
      window.getValue = key => {
        return window[key];
      };
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

localhost:8080 域名iframe.html

<!DOCTYPE html>
<html>
  <body>
    iframe
    <script>
      document.domain = "localhost";
      console.log(top.setValue("list", [1, 2, 3]));
      console.log(top.getValue("list"));
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11

2、open 形式 localhost 域名index.html

<!DOCTYPE html>
<html>
  <body>
    <script>
      window.open("http://localhost:8080/iframe.html");
      window.onmessage = event => {
        if (event.origin == "http://localhost:8080") {
          console.log(event.origin, event.data);
        }
      };
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

localhost:8080 域名iframe.html

<!DOCTYPE html>
<html>
  <body>
    iframe
    <script>
      window.onload = () => {
        window.opener.postMessage("value", "http://localhost");
      };
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11

3、iframe 形式 localhost 域名index.html

<!DOCTYPE html>
<html>
  <body>
    <iframe src="http://localhost:8080/iframe.html" frameborder="0"></iframe>
    <script>
      window.onmessage = event => {
        if (event.origin == "http://localhost:8080") {
          console.log(event.origin, event.data);
        }
      };
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

localhost:8080 域名iframe.html

<!DOCTYPE html>
<html>
  <body>
    iframe
    <script>
      window.onload = () => {
        window.top.postMessage("value", "http://localhost");
      };
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11

编辑

#iframe #postMessage

上次更新: 2021/07/19, 02:17:53

← JavaScript闭包详解 JavaScript逻辑运算符“&&”和“||”短路原则的应用→