1. web端同源跨页面通信

同源是指具有相同的根地址,相同的端口号,
如http://localhost:5500/a.html 与http://localhost:5500/b.html 就属于同源页面.
更多可参考: 浏览器的同源策略

2. 解决方案探讨

如果不经过服务器的话就需要在页面共同数据位置找解决方案,
目前sessionStorage只能在当前页面打开, 其他页面看不到这个sessionStorage的值, 所以只能用localStorage进行通信.
如果使用定时器去定时获取这个值并检查值是否有变化,势必会影响页面的性能,造成不必要的性能损失与浪费.

更优的方案是: 使用事件的触发与监听

浏览器的js环境中的window全局变量有很多已定义好的事件, 如:click,mouseup,mousedown,drag,keydown,keyup,storage .... 等等, 可查看TS中的WindowEventMap的键值列表, 其中就有对storage的监听事件, 我们就是要利用这个事件做文章, 但是这个事件监听有个缺点: 只能监听其他页面localStorage触发的事件,当前页面的监听不到该事件. 为了弥补这个缺点后面会自定义一个当前页面的事件.
思路理清之后, 下面就是最明了的代码了

3. 代码

定义a页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a.html</title>
</head>

<body>
    <h1>a页面 - 跨页面通信-localStorage</h1>
    <button onclick="setItemEvent()">向页面b发起通信</button>
    <script>
        function setPageCommunicationEvent(key, value) {
            var setItemEvent = new Event("setItemEvent");
            setItemEvent.key = key;
            setItemEvent.newValue = value;
            window.dispatchEvent(setItemEvent);
            localStorage.setItem(setItemEvent.key, setItemEvent.newValue);
        }

        function addPageCommunicationEventListener(callBack) {
            let call = callBack && typeof callBack === 'function' ? callBack : event => {
                console.log("a收到监听:", event.key, event.newValue);
            }
            //只能监听同浏览器其他页面的localStorage事件,且只能监听变化的localStorage值
            window.addEventListener("storage", call);
            //只能监听当前页面Event事件, 且每次触发的事件都会监听到
            window.addEventListener("setItemEvent", call);
        }

        addPageCommunicationEventListener(event => {
            console.log("a自定义收到监听:", event.key, event.newValue);
        });

        function setItemEvent() {
            setPageCommunicationEvent('a', '我是从a页面发出的' + new Date().getTime());
        }
    </script>

</body>

</html>

定义b页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>b.html</title>
</head>

<body>
    <h1>b页面 - 跨页面通信-localStorage</h1>
    <button onclick="setItemEvent()">向页面a发起通信</button>
    <script>
        function setPageCommunicationEvent(key, value) {
            var setItemEvent = new Event("setItemEvent");
            setItemEvent.key = key;
            setItemEvent.newValue = value;
            window.dispatchEvent(setItemEvent);
            localStorage.setItem(setItemEvent.key, setItemEvent.newValue);
        }

        function addPageCommunicationEventListener(callBack) {
            let call = callBack && typeof callBack === 'function' ? callBack : event => {
                console.log("b收到监听:", event.key, event.newValue);
            }
            //只能监听同浏览器其他页面的localStorage事件,且只能监听变化的localStorage值
            window.addEventListener("storage", call);
            //只能监听当前页面Event事件, 且每次触发的事件都会监听到
            window.addEventListener("setItemEvent", call);
        }

        addPageCommunicationEventListener();

        function setItemEvent() {
            setPageCommunicationEvent('a', '我是从a页面发出的' + new Date().getTime());
        }
    </script>
</body>

</html>

4. 解读

a,b页面中定义了两个函数setPageCommunicationEvent、addPageCommunicationEventListener,即触发事件、监听事件, 并且自定义了 setItemEvent事件并做了监听, 而且是同时监听, 注意这里的区别:window.addEventListener("storage", call);只能监听同浏览器其他页面的localStorage事件,且只能监听变化的localStorage值,window.addEventListener("setItemEvent", call);只能监听当前页面Event事件, 且每次触发的事件都会监听到. 两者正好是相互补充.

5. 结语

web同源跨页面通信使用事件监听的方式处理,且为了弥补当前页面不能触发监听事件重新自定义了一个事件.最终实现当前页面及其他页面都可监听到事件变化.
如果帮助到了您, 就蛮烦您点关注并点个赞吧.

本文作者：wwmin
微信公众号: DotNet技术说
本文链接：https://www.jianshu.com/p/d4248f9d873a
关于博主：评论和私信会在第一时间回复。或者[直接私信]我。
版权声明：转载请注明出处！
声援博主：如果您觉得文章对您有帮助，关注点赞, 您的鼓励是博主的最大动力！