阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      如何实现浏览器内多个标签页之间的通信?

      核心

      调用 localstorge、cookies 等本地存储方式;

      • 1、在 B 页面中可以使用 window.opener 获得 A 页面的 window 句柄,使用该句柄即可调用 A 页面中的对象,函数等。
        • 例如 A 页面定义 js 函数 onClosePageB,在 B 页面可以用 window.opener.onClosePageB 来进行回调。
      • 2、使用 window.showModalDialog(sURL [, vArguments] [,sFeatures])打开新窗口。 其中 vArguments 参数可以用来向对话框传递参数。传递的参数类型不限,包括数组、函数等。对话框通过window.dialogArguments来取得传递进来的参数。
      • 3、如果是支持 HTML5 的话,建议用本地存储 (local storage),它支持一个事件方法 window.onstorage,只要其中一个窗口修改了本地存储,其他同源窗口会触发这个事件。

      经典的总结

      • WebSocket、SharedWorker;
      • 也可以调用 localstorge、cookies 等本地存储方式;
      • localstorge 另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,
      • 我们通过监听事件,控制它的值来进行页面信息通信;
      • 注意 quirks:Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常;

      例子来解释

      方法一:调用 localstorge

      标签页 1

      <input id="name">
      <input type="button" id="btn" value="提交">
      
      <script type="text/javascript">
          $(function(){
              $("#btn").click(function(){
                 var name=$("#name").val();
                  localStorage.setItem("name", name); //存储需要的信息
              });
         });
      </script>
      

      标签页 2

      $(function(){
          window.addEventListener("storage", function(event){
      	   console.log(event.key + "=" + event.newValue);
          });     //使用storage事件监听添加、修改、删除的动作
      });
      
      

      方法二:使用 cookie+setInterval

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

      标签页 1

      $(function(){
          $("#btn").click(function(){
              var name=$("#name").val();
              document.cookie="name="+name;
          });
      });
      

      标签页 2

      $(function(){
      	function getCookie(key) {
      	   return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
      	}
      	setInterval(function(){
      	   console.log("name=" + getCookie("name"));
      	}, 10000);
      });
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录