跨页面通讯的几种方式

前言

你经常会遇到需要跨标签共享信息的情况,那么本文就跟大家一起回顾下web端有哪些方式可以实现这样的需求。

解决方案

websocket

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};   

参考资料:websocket教程(阮一峰)

localStorage 的监听

localstorge在一个标签页里被添加、修改或删除时,都会触发一个storage事件,通过在另一个标签页里监听storage事件,即可得到localstorge存储的值,实现不同标签页之间的通信。

$(function(){   
        window.addEventListener("storage", function(event){    
            console.log(event.key );   
            console.log(event.oldValue);    
            console.log(event.newValue);    

        });     
    }); 

定时器监听cookie

使用cookie+setInterval,将要传递的信息存储在cookie中,每隔一定时间读取cookie信息,即可随时获取要传递的信息。

$(function(){   

    setInterval(function(){    
       var value=cookieUtil.get('name');
        console.log(value);    
    }, 10000);    
});  

postMessage

参考我另一篇跨域的文章,有详细介绍这部分的操作。

其他

待补充

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端技术总结

cookie面面观

在前端面试中,有一个必问的问题:请你谈谈cookie和localStorage有什么区别啊?

1.6K900
来自专栏pangguoming

Nodejs开发框架Express3.0开发手记–从零开始

转载请注明出处: http://blog.fens.me/nodejs-express3/ 程序代码已经上传到github有需要的同学,自行下载。 http...

426120
来自专栏黒之染开发日记

webstorm/phpstorm 配置白鹭引擎快捷键编译TypeScript

3、 选择与截图中一致,或者选你看得懂的选项,这里是说要侦听的ts文件位于哪里,图片中的选项表示整个项目中的ts文件

28830
来自专栏中国Android研究院

Flutter开发环境搭建

对于上文Android Studio✗部分,只需要在AndroidStudio中的Plugin中安装Flutter插件即可。 对于'Some android l...

13030
来自专栏编程心路

SSH框架之旅-struts2(4)

AOP 是 Aspect Objected Prograing(面向切面编程)的缩写。struts2 中的拦截器就是这种编程策略的一种实现,AOP 思想是在基本...

15230
来自专栏Android工程师的修仙之旅

源码阅读环境OpenGrok搭建

OpenGrok其实就是一个搜索引擎,只不过不同于Google、Baidu面向的是网页,OpenGrok面向的是源码。

57510
来自专栏和蔼的张星的图像处理专栏

4. TX2--配置无线连接。

配置无线连接当然是有用的,虽然在学习阶段可以把TX2插上键盘和鼠标当做一个pc机来用,但是一旦部署到项目中,再想修改程序或者启动引用去连接鼠标和键盘可能就不是那...

35740
来自专栏游戏杂谈

Operation could not be completed. (WebKitErrorDomain error 101.)

ios中加载网页,会报如标题所示的错误“Operation could not be completed. (WebKitErrorDomain error ...

20410
来自专栏coder修行路

jS正则和WEB框架Django的入门

JS正则 -test 判断字符串是否符合规定的正则表达式 -exec 获取匹配的数据 test的例子: ? 从上述的例子我们可以看出,如果rep.test匹配到...

22760
来自专栏码神联盟

IntelliJ系列 ② | IDEA 之 注释模板配置

58320

扫码关注云+社区

领取腾讯云代金券