js向整个浏览器发送消息,其它标签页域名可以接收该消息
时间: 2024-04-15 11:32:01 浏览: 25
在浏览器中,如果你希望从一个标签页发送消息给其它标签页(跨标签页通信),你可以使用 Broadcast Channel API。该 API 可以通过不同标签页之间共享同一个频道来实现消息的传递。以下是一个简单的示例:
在发送消息的标签页:
```javascript
// 创建一个 Broadcast Channel,指定频道名称
const channel = new BroadcastChannel('myChannel');
// 发送消息到频道
channel.postMessage('Hello, other tabs!');
```
在接收消息的标签页:
```javascript
// 创建一个 Broadcast Channel,指定相同的频道名称
const channel = new BroadcastChannel('myChannel');
// 监听频道上的消息
channel.addEventListener('message', function(event) {
// 获取传递的数据
const message = event.data;
// 在控制台打印消息内容
console.log(message);
});
```
在发送消息的标签页中,我们先创建一个 Broadcast Channel,并指定一个频道名称。然后,通过 `postMessage` 方法向频道发送消息。
在接收消息的标签页中,我们同样创建一个具有相同频道名称的 Broadcast Channel,并通过 `addEventListener` 监听频道上的消息。当有新消息到达时,事件处理函数会被触发,我们可以通过 `event.data` 获取传递的数据。
在不同标签页之间使用 Broadcast Channel API 可以实现跨标签页的通信。需要注意的是,为了确保安全性,浏览器会限制 Broadcast Channel 的访问权限,只有相同的顶级域名(或者相同的 `file://` 协议)的标签页才能收到消息。
希望这个示例对你有所帮助!如有其他问题,请随时提问。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)