Fatal编程技术网
  • javascript/
  • Javascript 在另一页上使用按钮触发覆盖

Javascript 在另一页上使用按钮触发覆盖

javascript html button hyperlink

Javascript 在另一页上使用按钮触发覆盖,javascript,html,button,hyperlink,Javascript,Html,Button,Hyperlink,我试图用一个外部js文件和按钮所在的第二个HTML页面控制HTML中的覆盖函数 到目前为止，当按钮在同一页上时，它可以工作。但我无法从第2页的第1页触发覆盖 因此，流媒体页面是观众可以查看和交互的页面 <div id="overlay" onclick="turnOverLayOff()"> <div id="textContainer"><iframe src=&quo

我试图用一个外部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>
要从中控制streamingpage的第二页：

<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>
    


测试tekst任何东西
单击此处打开
作为同一浏览器中页面/选项卡之间的信号传递方式，您可以使用上面评论中提到的
广播频道
api

作为演示-两个基本HTML页面，都建立到公共
广播频道的连接
，其中一个
侦听另一个的消息

在下文中，视频元素和iFrame被注释掉并替换为简单文本


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

第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>




第1页：流线型页面
#覆盖{显示：块}
IFRAME内容-docs.google.com
视频YouTUBE
const getStyle=（n，css）=>{
让风格；
if（window.getComputedStyle）{
style=window.getComputedStyle（n，null）.getPropertyValue（css）；
}else if（n.currentStyle）{
css=css.replace（/\-（\w）/g，函数（stratch，p1）{
返回p1.toUpperCase（）；
});
style=n.currentStyle[css]；
}否则{
风格=''；
}
回归风格；
}
设oChan=新广播频道（“制表符”）；
oChan.addEventListener（'消息'，（e）=>{
//在邮件到达时检查邮件
控制台日志（如数据）；
让div=document.getElementById（'overlay'）；
div.style.display=getStyle（div，'display'）==block'？'none'：'block'；
});


第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>




第2页：控制器
#覆盖{显示：块}
测试tekst任何东西
单击此处打开
视频YouTUBE
const getStyle=（n，css）=>{
让风格；
if（window.getComputedStyle）{
style=window.getComputedStyle（n，null）.getPropertyValue（css）；
}else if（n.currentStyle）{
css=css.replace（/\-（\w）/g，函数（stratch，p1）{
返回p1.toUpperCase（）；
});
style=n.currentStyle[css]；
}否则{
风格=''；
}
回归风格；
}
设oChan=新广播频道（“制表符”）；
sendmessage=函数（数据）{
postMessage（{'data'：data}）
};
设bttn=document.querySelector（'button#toggler'）；
bttn.addEventListener（'click'，e=>{
让div=document.getElementById（'overlay'）；
div.style.display=getStyle（div，'display'）==block'？'none'：'block'
/* 
发送消息-负载可以根据您的需要进行定制，并在第1页的侦听器中进行处理
这只是发送本地DIV的“display”状态，但您可以发送任何有意义/有用的内容。
*/
sendmessage（{state:getStyle（div，'display'）}）；
});

您需要一种在页面/选项卡之间发送信号的方法-其中一种方法是

<!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>