使用JS在多个页面之间相互通信与调用

2018-07-13 admin

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,代码如下:

1531391771682de7ff7a8f2 153139177191996ca7b5906

用法很简单,在所有页面都引入上面的JS,然后在A,B页面添加监听事件。

1531391772045ed7ed00eee

C页面对数据进行了修改后就发一个通知给A,B页面,让A,B页面进行相应的操作。

15313917721268575128297

就这样一个多页面之间互相通信调用的JS就封装好了,iframe与iframe之间的页面可以互相通信调用。浏览器每个标签页之间的页面也可以互相通信调用。

不过需要注意以下几点:

1、 互相通信调用之间的几个页面要放在服务器环境,例如放在IIS或者tomcat之类的服务容器里。

2、 打开的几个页面要是同源页面,也就是几个页面之间IP相同,端口相同。

3、 打开的几个页面必须是在同一个浏览器。

4、 发送通知传的参数现在还只能是字符串,如果要传JSON类型,请先在C页面转字符串,在A,B接收到通知后,再把字符串转回JSON。

5、同一个页面接收不到同一个页面发送的通知,当然谁也不会做这种事,在同一个页面接收同一个页面发送的通知。

原文链接:https://segmentfault.com/a/1190000015623708

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35896.html

文章标题:使用JS在多个页面之间相互通信与调用

相关文章
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
回到顶部