如何实现跨HTML页面触发流媒体页Overlay功能

问题说明 #

• 需求：通过外部JS文件，使用存放控制按钮的第二HTML页面，控制供观众查看交互的流媒体页面的Overlay开关
• 现有运行状态：按钮与功能处于同一页面时运行正常，无法从独立控制页面触发流媒体页面的Overlay功能

现有实现代码 #

流媒体页面（观众端）代码 #

<div id="overlay" onclick="turnOverLayOff()">
    <div id="textContainer">
        <iframe src="示例表单嵌入地址" width="640" height="415" frameborder="0" marginheight="0" marginwidth="0">加载中…</iframe>
    </div>
</div> 

<iframe width="560" height="315" src="示例视频嵌入地址" title="视频播放器" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<script src="overlay.js"></script>

共用外部JS文件（overlay.js）代码 #

function turnOverLayOn(){
    document.getElementById('overlay').style.display = 'block';
}
function turnOverLayOff(){
    document.getElementById('overlay').style.display = 'none';
}

控制页面（按钮端）代码 #

<div id="overlay" onclick="turnOverLayOff()">
    <div id="textContainer">测试文本</div>
</div> 

<div>
    <button onclick="turnOverLayOn()">点击开启Overlay</button>
</div>

<iframe width="560" height="315" src="示例视频嵌入地址" title="视频播放器" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<script src="overlay.js"></script>

问题根因 #

两个独立运行的HTML页面拥有完全隔离的DOM上下文，控制页面的JS执行时只能操作当前页面内的DOM元素，完全无法访问流媒体页面的节点，因此当前代码逻辑不可能实现跨页控制。

可行解决方案 #

方案1：跨窗口通信（适用于控制页嵌入流媒体页、或两页面同源部署的场景） #

1. 若流媒体页是被控制页以iframe形式加载，控制页可以通过iframe的contentWindow属性获取流媒体页的全局上下文，直接调用流媒体页内的turnOverLayOn/turnOverLayOff方法
2. 若两页面分别独立运行但同源，可通过postMessage接口实现跨页面的消息传递：
   • 流媒体页先监听指定类型的消息，收到开关指令后操作自身的Overlay DOM
   • 控制页触发按钮时，向流媒体页的窗口对象发送对应类型的消息

方案2：共享状态存储（适用于两页面完全独立、不同源的场景） #

通过共享存储介质（比如同域的LocalStorage、IndexedDB，或第三方状态同步服务）存储Overlay开关状态：

1. 流媒体页启动后监听存储状态的变化，状态变更时自动切换自身Overlay的显隐
2. 控制页按钮触发时，直接修改共享存储的状态值，即可同步驱动流媒体页更新

内容的提问来源于stack exchange，提问作者Streaming live