web开发，使用JS在多个页面、多个标签页面之间相互通信与调用

GitHub：https://github.com/roomanl/eventJS

这几天做一个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.cnblogs.com/sddman/p/9303476.html