关于javascript:如何实现浏览器标签页之间的通信

浏览器标签页之间通信的实现

应用场景

​ 前端开发过程中，总是防止不了要进行前端标签页之间的通信，最经典的例子莫过于音乐播放网站中，当第一次点击播放列表中的歌曲时，它会关上一个新的标签页进行播放，而当在列表中再次点击歌曲播放时，并不会再多关上一个标签页，而是会在方才新关上的标签页上播放歌曲。

形式办法

这里跳转新页面均应用 window.open¹ 办法，这里略微说下 window.open 办法的参数

• url（可选）
  一个字符串，示意要加载的资源的 URL 或门路。如果指定空字符串（""）或省略此参数，则会在指标浏览上下文中关上一个空白页。

• target（可选）
  一个不含空格的字符串，用于指定加载资源的浏览上下文的名称。如果该名称无奈辨认现有的上下文，则会创立一个新的上下文，并赋予指定的名称。还能够应用非凡的 target 关键字：_self、_blank、_parent 和 _top。

  该名称可用作 <a> 或<form>元素的 target 属性。

• windowFeatures（可选）
  一个字符串，蕴含以逗号分隔的窗口个性列表，模式为 name=value，布尔个性则仅为 name。这些个性包含窗口的默认大小和地位、是否关上最小弹出窗口等选项。

  在上面的例子中采纳 audio 作为浏览上下文的名称，让他从始至终只创立一个新的标签页

1. 应用路由上的 query 传参

list.html

const broadCastChannel = new BroadcastChannel('audio')
function showAudio(){
    // 形式一: 通过 query，毛病会刷新已关上的页面，但并没有同源策略影响
    window.open('/audio.html?name= 张三 &id=555','audio')
}

audio.html

const app = document.getElementById('app')
const query = new URLSearchParams(window.location.href.split('?')[1])
app.innerText = query.get('name')

长处：每次关上，audio 页面都会变为以后流动标签页

毛病：

• 每次关上，audio 页面都会被刷新，从新加载
• 如果新关上的浏览上下文不共享雷同的源²，则关上脚本将无奈与浏览上下文的内容进行交互（读取或写入）。

2. 应用 localStroage 监听

利用同源页面 ² 共享 localStroage 的个性，利用 windw.addEventLister 监听 stroage³的变动，来实现两个标签页的通信，具体查看上面例子：

list.html

function showAudio(){if(!localStorage.getItem('hasAudio')){window.open('/audio.html','audio')
        localStorage.setItem('hasAudio',1)
    }
    setTimeout(()=>{localStorage.setItem('name','李四')
    },3000)
}

audio.html

window.onunload = () =>{localStorage.removeItem('hasAudio')
    localStorage.removeItem('name')
}
const app = document.getElementById('app')
window.addEventListener('stroage',e=>{const app = document.getElementById('app')
    app.innerText = e.newValue
})

长处：

• 第一次关上，之后再传参无需刷新界面从新加载资源

毛病：

• 关上页面的需为同源页面，localStroage 在同源页面中共享
• 同源页面需通过 localStroage 检控通信，管制麻烦，简单场景应用不不便

3. 应用 BroadcastChannel

BroadcastChannel 接口代理了一个命名频道，能够让指定 origin 下的任意 browsing context 来订阅它。它容许同源 ² 的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间互相通信。通过触发一个 message 事件，音讯能够播送到所有监听了该频道的 BroadcastChannel 对象。

list.html

const broadCastChannel = new BroadcastChannel('audio')
function showAudio(){if(!localStorage.getItem('hasAudio')){window.open('/audio.html','audio')
        localStorage.setItem('hasAudio',1)
    }

    setTimeout(()=>{broadCastChannel.postMessage({name:'李四'})
    },3000)

}

audio.html

window.onunload = () =>{localStorage.removeItem('hasAudio')
}
const app = document.getElementById('app')
const broadCastChannel = new BroadcastChannel('audio')
broadCastChannel.addEventListener('message',e=>{const {name} = e.data
    const app = document.getElementById('app')
    app.innerText = name
})

长处：

• 第一次关上，之后再传参无需刷新界面从新加载资源
• 须要共用频道的页面，通信简略

毛病：

• 关上页面的需为同源页面 ²，BroadcastChannel 只会向命名频道雷同的同源页面发送和接管音讯