首页 > 同一浏览器的两个Tab页,如何实现在Tab a中点一个链接,在Tab b(编辑器)中打开一个子tab页?

同一浏览器的两个Tab页,如何实现在Tab a中点一个链接,在Tab b(编辑器)中打开一个子tab页?

在Chrome中打开两个Tab,分别是TabA(test.com),TabB(editor.test.com,是一个web编辑器,在编辑器中可以打开tab页编辑多个文件)。能否在test.com中点击一个链接的时候,在editor.test.com中打开一个tab页??


可以通过在页面内监听storage事件来实现,A页面中点击链接,跳转前去改变cookie或者localStorage的值,然后B页面内的Storage事件被触发,执行相应操作。常见应用场景:在网站某个页面内登录了,其他未登录状态页面立即刷新,更新成已登录状态。不用Storage事件也可以用websocket,兼容性就自己权衡吧


如果不用HTML5的话,简单的跨子域就可以了。

在tabA第一次打开编辑器tabB的时候,执行

editor = window.open("http://editor.test.com")

(这个请求可能被浏览器屏蔽,自行百度解决方式,只有用户点击鼠标之后open才不会被屏蔽)
然后editor就是新打开页面的window对象。但是还涉及跨域的问题,还不能通过editor直接在新的标签页执行代码。下面需要做的就是在 tabB 里面执行一句 window.domain = "test.com"。这样就可以在TabA里面通过 editor 执行任意的代码了。
如果用 HTML5 的话,就不用跨域了。
直接在tabA里面执行

editor = window.open("http://editor.test.com");
editor.postMessage("123","*")

tabB就可以

window.onmessage = function(e){
    // e.data 获得发送的消息
}
【热门文章】
【热门文章】