使用其他页面上的按钮触发覆盖答案

【问题标题】：Trigger overlay with button on other page使用其他页面上的按钮触发覆盖
【发布时间】：2021-07-08 06:40:26
【问题描述】：

我正在尝试使用外部 js 文件和按钮所在的第二个 HTML 页面来控制 HTML 中的覆盖功能。

到目前为止，当按钮在同一页面上时它可以工作。但我无法从第 2 页的第 1 页触发覆盖。

因此，流媒体页面是观看者能够查看和互动的页面。

<div id="overlay" onclick="turnOverLayOff()">
         
        <div id="textContainer"><iframe src="https://docs.google.com/forms/d/e/1FAIpQLSe5NWLPhYiLqM2YIUPCsVk3RB5h660Wei9eDGyKUhMMIB4iZw/viewform?embedded=true" width="640" height="415" frameborder="0" marginheight="0" marginwidth="0">Laden…</iframe> </div>
         
    </div> 
    
<iframe width="560" height="315" src="https://www.youtube.com/embed/5A9v-n53LtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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

那么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">Test tekst whatever </div>
    </div> 
    
    <div>
        <button onclick="turnOverLayOn()">Click here to turn ON </button>
    </div>
 

<iframe width="560" height="315" src="https://www.youtube.com/embed/5A9v-n53LtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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

【问题讨论】：

您需要一种在页面/选项卡之间发出信号的方法 - 一种方法是 BroadcastChannel api

标签： javascript html button hyperlink

【解决方案1】：

作为在同一浏览器中的页面/选项卡之间发出信号的一种方式，您可以使用上面评论中提到的BroadcastChannel api。

作为演示 - 两个基本的 HTML 页面，都建立了与一个公共 Broadcast Channel 的连接，一个 listens 用于接收来自另一个的消息。

以下视频元素和 iframe 被注释掉并替换为简单的文本。

getStyle 函数仅允许以编程方式访问指定元素上设置的样式，并在此处用于确定。根据external.js...，Javascript 可以写入单个文件并包含在两个页面中...

第 1 页 - 被控制的页面

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Page 1: streamingpage</title>
        <style>
            #overlay{display:block}
        </style>
    </head>
    <body>
        <div id='overlay'>
            <div id='textContainer'>
                <!--<iframe src='https://docs.google.com/forms/d/e/1FAIpQLSe5NWLPhYiLqM2YIUPCsVk3RB5h660Wei9eDGyKUhMMIB4iZw/viewform?embedded=true' width='640' height='415' frameborder='0' marginheight='0' marginwidth='0'>Laden…</iframe>-->
                IFRAME CONTENT - docs.google.com
            </div>
        </div> 
        <!--<iframe width='560' height='315' src='https://www.youtube.com/embed/5A9v-n53LtI' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>-->
        VIDEO-YouTUBE
        <script>
        
            const getStyle=(n,css)=>{
                let style;
                if( window.getComputedStyle ){
                    style = window.getComputedStyle( n, null ).getPropertyValue( css );
                } else if( n.currentStyle ){
                    css = css.replace(/\-(\w)/g, function ( strMatch, p1 ){
                        return p1.toUpperCase();
                    });
                    style = n.currentStyle[ css ];
                } else {
                    style='';
                }
                return style;
            }
            
            let oChan=new BroadcastChannel( 'tabs' );
                oChan.addEventListener('message',(e)=>{
                    //inspect messages as they arrive
                    console.log( e.data );
                    
                    let div=document.getElementById('overlay');
                        div.style.display=getStyle(div,'display')=='block' ? 'none' : 'block';
                });
        </script>
    </body>
</html>

第 2 页 - 进行控制的页面

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>page2: controller</title>
        <style>
            #overlay{display:block}
        </style>
    </head>
    <body>
        <div id='overlay'>
            <div id='textContainer'>Test tekst whatever </div>
        </div>
        
        <div>
            <button id='toggler'>Click here to turn ON</button>
        </div>
        <!--<iframe width='560' height='315' src='https://www.youtube.com/embed/5A9v-n53LtI' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>-->
        VIDEO-YouTUBE
        
        <script>
        
            const getStyle=(n,css)=>{
                let style;
                if( window.getComputedStyle ){
                    style = window.getComputedStyle( n, null ).getPropertyValue( css );
                } else if( n.currentStyle ){
                    css = css.replace(/\-(\w)/g, function ( strMatch, p1 ){
                        return p1.toUpperCase();
                    });
                    style = n.currentStyle[ css ];
                } else {
                    style='';
                }
                return style;
            }
            
            
            
            let oChan=new BroadcastChannel( 'tabs' );
            
            sendmessage=function( data ){
                oChan.postMessage( { 'data':data } )
            };
            
            
            
            let bttn=document.querySelector('button#toggler');
                bttn.addEventListener('click',e=>{
                    let div=document.getElementById('overlay');
                        div.style.display=getStyle(div,'display')=='block' ? 'none' : 'block'
                        
                    /* 
                        send a message - the payload can be tailored to suit your needs and processed within the listener on page 1
                        this simply sends the `display` status of the local DIV but you can send whatever is meaningful/helpful.
                    */
                    sendmessage( { state:getStyle(div,'display') } );
                });
        </script>
    </body>
</html>

【讨论】：