摘要：在界面监听事件。浏览器每个标签页之间的页面也可以互相通信调用。
GitHub：https://github.com/roomanl/ev...
这几天做一个web项目有这样一个需求，web项目是一个后台管理系统，在使用系统时会打开很多标签页，每个标签页就是一个iframe打开的一个新的html页面，现在需要在每个标签页之间互相通信、互相调用方法。例如：打开了A,B,C三个标签页，我在C页面把数据修改了，我要通知A,B两个页面的数据也要更新到最新修改的数据。
在网上看到的解决办法都是用iframe 父页面与子页面互相调用方法，但是用这种方法感觉一点都不灵活，不是很好用，有很大的局限性。
后来在使用localStorage存储的时候发现localStorage有这样一个特性。
在A界面监听storage事件。
window.addEventListener("storage", function (e) {
alert(e.key+"="+e.newValue);
});
在B页面修改或添加了localStorage。
localStorage.setItem("key", "value");
然后A界面的监听事件里就可以接收到通知。
利用这个特性我封装了一个JS，代码如下：
用法很简单，在所有页面都引入上面的JS，然后在A,B页面添加监听事件。
C页面对数据进行了修改后就发一个通知给A,B页面，让A,B页面进行相应的操作。
就这样一个多页面之间互相通信调用的JS就封装好了，iframe与iframe之间的页面可以互相通信调用。浏览器每个标签页之间的页面也可以互相通信调用。
不过需要注意以下几点：
1、 互相通信调用之间的几个页面要放在服务器环境，例如放在IIS或者tomcat之类的服务容器里。
2、 打开的几个页面要是同源页面，也就是几个页面之间IP相同，端口相同。
3、 打开的几个页面必须是在同一个浏览器。
4、 发送通知传的参数现在还只能是字符串，如果要传JSON类型，请先在C页面转字符串，在A,B接收到通知后，再把字符串转回JSON。
5、同一个页面接收不到同一个页面发送的通知，当然谁也不会做这种事，在同一个页面接收同一个页面发送的通知。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96111.html
摘要：动态映射利用来进行域名解析，在专门的服务器上配置主机到地址的映射。前两者都无效的情况下，向路由器发送查询的请求，或者直接向用户定义的服务地址发送域名解析的请求。 【前端芝士树】从浏览器搜索框输入网址到网页呈现发生了什么？ 这个也是在前端面试中问得比较多的一个问题了，文章篇幅有限尽可能关注一些前端开发中不太会遇到的知识点，如果想扩展的话请点击引用文章吧，也欢迎评论，后续会继续补充。 0....
摘要：年终总结结果到这个时间才写，其实也是无奈。这一年最重要的事情就是顺利从一只学生狗转职为一只社畜。四月份毕业之后以前端工程师的职位入职天猫，到现在也差不多工作一年了。 年终总结结果到这个时间才写，其实也是无奈。本来计划过年写的，没想到Steam竟然开了个农历春节特惠，然后就被各种游戏打了，辣鸡平台，敛我钱财，颓我精神，耗我青春，害我单身 以下全都是个人看法，如果有不认同的地方，请大吼一声...
摘要：年终总结结果到这个时间才写，其实也是无奈。这一年最重要的事情就是顺利从一只学生狗转职为一只社畜。四月份毕业之后以前端工程师的职位入职天猫，到现在也差不多工作一年了。 年终总结结果到这个时间才写，其实也是无奈。本来计划过年写的，没想到Steam竟然开了个农历春节特惠，然后就被各种游戏打了，辣鸡平台，敛我钱财，颓我精神，耗我青春，害我单身 以下全都是个人看法，如果有不认同的地方，请大吼一声...
阅读 1361·2021-10-11 11:12
阅读 3170·2021-09-30 09:46
阅读 1599·2021-07-28 00:14
阅读 3104·2019-08-30 13:49
阅读 2554·2019-08-29 11:27
阅读 3102·2019-08-26 11:52
阅读 554·2019-08-23 18:14
阅读 3408·2019-08-23 16:27
