阅读此来源:https://dev.to/dcodeyt/send-data-between-tabs-with-javascript-2oa
初始化通道的过程如下:
const channel = new BroadcastChannel("my-channel");
这是接收消息的方式:
channel.addEventListener("message", e => {
console.log(e.data);
});
这是您可以发布消息的方式
channel.postMessage("Hello world");
现在,知道了所有这些,让我们看看
解决方案
如果您打开选项卡,您将为每个选项卡打开一些 URL。假设您可以控制您打开的页面的源代码,您可以执行以下操作:
- 在主标签和打开的标签上初始化频道
- 在主选项卡和打开的选项卡上创建
message 事件侦听器
- 当您可能想要打开标签时,将消息发布到子标签并查看您收到了多少回复
例子
子事件监听器
const channel = new BroadcastChannel("my-channel");
channel.addEventListener("message", e => {
if (e.data === "ping") channel.postMessage("pong");
});
主事件监听器
var pongCount = 0;
var pongLimit = 12;
const channel = new BroadcastChannel("my-channel");
channel.addEventListener("message", e => {
if (e.data === "pong") pongCount++;
});
打勾
setInterval(function() {
pongCount = 0;
channel.postMessage("ping");
setTimeout(function() {
for (let pongIndex = pongCount + 1; pongIndex < pongLimit; pongIndex++) {
//open a tab
}
}, 100);
}, 1000);
请注意,勾选代码需要在主选项卡中
编辑
似乎无法访问正在加载的页面。如果是这种情况,您可以实现一个代理应用程序,它将请求传输到目标页面以绕过 Chrome 的限制,并拥有您在源代码方面具有完全访问权限的包装页面,因此能够发送和接收消息.
也可以使用 chrome.tabs 扩展名,例如
chrome.tabs.query({windowType:'normal'}, function(tabs) {
console.log('Number of open tabs in all normal browser windows:',tabs.length);
});
但为此,需要安装给定的扩展:https://developer.chrome.com/docs/extensions/reference/tabs/