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

作者 : 开心源码 本文共492个字,预计阅读时间需要2分钟 发布时间: 2022-05-12 共138人阅读

这几天做一个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,代码如下:

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

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web开发,多个页面、多个标签页面之间相互通信与调使用

发表回复