前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >跨页面通讯的几种方式

跨页面通讯的几种方式

作者头像
RobinsonZhang
发布2018-08-28 11:44:38
1.3K0
发布2018-08-28 11:44:38
举报

前言

你经常会遇到需要跨标签共享信息的情况,那么本文就跟大家一起回顾下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

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

其他

待补充

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-08-272,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 解决方案
    • websocket
      • localStorage 的监听
        • 定时器监听cookie
          • postMessage
          • 其他
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档