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

核心

调用 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前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

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