H5标签页之间的通信

当前页面的内容发生改变，目标页面的内容也随之更新，并且不会刷新。

注意事项：

1. 当前页面与目标页面的“”频道一致“”
2. 当前页面与目标页面“”同源“”

当前页面

<input type="text" />
<button>发送</button>
<script>
     const inpNode = document.querySelector('input')
     const butNode = document.querySelector('button')
     // 初始化channel, 并且定义频道名称('music')
     const channel = new BroadcastChannel('music')

     butNode.addEventListener('click', () => {
        // 发送通信并且传递值
        channel.postMessage(inpNode.value)
    })
</script>

目标页面

<h1>This is an target page</h1>
<p></p>

<script>
    const pNode = document.querySelector('p')
    // 初始化channel，并且定义频道名称('music')
    const channel = new BroadcastChannel('music')
    // 接收channel发送的消息
    channel.addEventListener('message', (val) => {
        pNode.innerText = val.data
    })
</script>