iframe + postMessage + localStorage 实现多标签页信息同步

Posted shichangchun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iframe + postMessage + localStorage 实现多标签页信息同步相关的知识,希望对你有一定的参考价值。

需求背景:

  存在多个项目(顶级域名相同.scc.com),当打开多个tab页时,我在一个页面退出登录,其他页面同步信息,页面弹出已登出提示。

 

实现方式 iframe + postMessage + localStorage

 

如有三个已登陆的页面 A1 A2 B1

页面A1: http://a1.scc.com

页面A2: http://a2.scc.com

页面B1: http://b1.scc.com

一个空的iframe页面: http://static.scc.com/iframe.html

 

http://static.scc.com/iframe.html 内容如下

<html>
<body>
    <script>
        window.addEventListener("storage", function (ev) {
            ev = window.event || ev
            if (ev.key == "scc_message") {
                window.parent.postMessage(ev.newValue, "*");
            }
        });

        function postMessageToStorage(message) {
            localStorage.setItem("scc_message", JSON.stringify(message));
            localStorage.removeItem("scc_message");
        }

        window.addEventListener("scc_message", function (ev) {
            ev = window.event || ev
            let data = ev.data;
            postMessageToStorage(data);
        });

    </script>
</body>
</html>

  

页面 A1 A2 B1 代码相同

DOM引入iframe标签

<iframe id="sccproxy" src="//static.scc.com/iframe.html" style="width:0px;height:0px;frameBorder:0"></iframe>
<div v-if=flag">
    <h3><i></i><span >登录状态已改变</span></h3>
    <p>当前账号的登录状态已改变,页面即将刷新。</p>
    <div><a href="/">确定</a></div>
</div>
<button @click="sendMessageToTab({type:‘‘sccExit})">退出登录<button>

js代码 

data () {
  return {
    flag:false
  }
}
mounted () {
   this.addMessageListener ()
},
methods: {
 addMessageListener ()  {
   let _this = this
     window.addEventListener("message", function (ev) {
        ev = window.event || ev
        let data = ev.data;
        let source = ev.source;
        let origin = ev.origin;
        if (!data) return;
        if (origin.indexOf("//static.scc.com") >= 0) {
          try {
            let info = JSON.parse(JSON.parse(data));
            if (info.type == "sccExit" && !document.hasFocus()) {
              _this.flag = true
            }
        } catch (e) {
          console.log(e)
        }
      }
    });
 },
 sendMessageToTab (data) {
  try {
        document.querySelector("#sccproxy").contentWindow.postMessage(JSON.stringify(data), ‘http://static.scc.com‘);
      } catch (err) {
        console.log(err)
      }
  }
}

  

以上是关于iframe + postMessage + localStorage 实现多标签页信息同步的主要内容,如果未能解决你的问题,请参考以下文章

PostMessage 读取 iframe 内容

javascript - postMessage 到沙盒 iframe,为啥收件人窗口原点为空?

使用 postmessage 刷新 iframe 的父文档

使用 iframe + postMessage 实现跨域通信

postMessage处理iframe 跨域问题

postMessage处理iframe 跨域问题