Broadcast Channel API使用示意实例页面

回到相关文章 »

展示

主页面

《HTML并不简单》是本好书

代码

CSS代码：

ui-grid {
    display: grid;
    height: 600px;
    grid-template: "main a" 1fr "main b" 1fr / 1fr 1fr;
    gap: 1em;
}
ui-grid iframe {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;    
}
ui-grid textarea,
ui-grid button {
    font-size: 100%;
    padding: 8px;
    width: -webkit-fill-available;
    width: stretch;
}
ui-item:first-child {
    grid-area: main;
}

HTML代码：

<ui-grid>
    <ui-item>
        <h4>主页面</h4>
        <p>
            <textarea id="textarea">《HTML并不简单》是本好书</textarea>
        </p>
           <button id="button">点击我发送信息</button>
    </ui-item>
    <ui-item>
        <iframe src="./a.html"></iframe>
    </ui-item>
    <ui-item>
        <iframe src="./b.html"></iframe>
    </ui-item>
</ui-grid>

JS代码：

const bc = new BroadcastChannel('zhangxinxu');
button.onclick = function () {
    bc.postMessage(textarea.value);
};