窗口间的通信与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)

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

获取到不同窗口的 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>

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>

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>

localhost:8080 域名iframe.html

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

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>

localhost:8080 域名iframe.html

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

文章作者: hn-failte
文章链接: https://failte.cn
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 hn-failte !
评论
 上一篇
浏览器异步加载JS的方法 浏览器异步加载JS的方法
浏览器异步加载JS的方法 浏览器加载JS的方法 说到这个,最常见的就是内置JS和外联JS了 内置: <script> console.log('加载完成') </script> 外联: <script src=
2020-04-29
下一篇 
CMS框架推荐 CMS框架推荐
博客改版了,由原来的 Jekyll 转换为现在的 hexo,因此和分享下目前比较流行的一些CMS框架…。 主要原因如下: 1、大概是视疲劳,样式上希望可以进行更新 2、hexo基于Node,更适合 同时,也推荐各位前端小伙伴使用
2020-03-31
  目录