先看最终的效果:
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
关于博主：评论和私信会在第一时间回复。或者[直接私信]我。
版权声明：转载请注明出处！
声援博主：如果您觉得文章对您有帮助，关注点赞, 您的鼓励是博主的最大动力！
