跨业面通信的三种方式

亦双城的双子娴

已于 2023-09-22 17:13:11 修改

阅读量145

点赞数

文章标签：前端 javascript 开发语言

于 2023-09-22 17:12:14 首次发布

本文链接：https://blog.csdn.net/qq_39285178/article/details/133177730

版权

本文介绍了三种JavaScript在网页间进行通信的方法：利用本地localStorage实现缓存通知，使用BroadcastChannel进行同源页面间的广播通信，以及通过window.postMessage实现在不同源页面之间的通信。

摘要由CSDN通过智能技术生成

方式一：

利用本地缓存的方式

//需要发送消息的时候
localStorage.setItem('updataCatalogTask',true)

//然后在你需要接受消息的页面添加监听
      window.addEventListener('storage', (event) => {
        console.log(event,'触发index');
        if (event.key == 'updataCatalogTask' && event.newValue == 'true') {
            //dosomething
        }
      })

方式二：广播通信

//需要发送消息的时候
const channel = new BroadcastChannel('updataCatalogTask') 



channel.postMessage('updataCatalogTask')

//然后在你需要接受消息的页面添加监听
      const channel = new BroadcastChannel('updataCatalogTask')
      channel.addEventListener('message',(event)=>{
         console.log(event,'跨业面通信！！！')
      })

前面两个必须同源

方式三：可以不同源

//需要发送消息的时候
window.opener.postMessage('updataCatalogTask')

//然后在你需要接受消息的页面添加监听
      window.addEventListener('message',(event)=>{
        console.log(event,'跨业面通信！！！')
      })