Javascript 共享<；部门>；从另一个实时页面_Javascript_Php_Ajax

Javascript 共享<；部门>；从另一个实时页面

javascript php ajax

Javascript 共享<；部门>；从另一个实时页面,javascript,php,ajax,Javascript,Php,Ajax,关于如何从其他页面获取或借用div的任何建议。我的页面包括两个csr视图（客户服务代表终端）和客户终端视图现在我正在做一个排队系统，我想做的是将csr视图的部分div共享到终端视图 terminal视图只是一个数据视图，比如que code，让他们知道下一个被我们的csr调用的人，等等，我想在这里包括csr生成的每个que的计时器，必须设置一个计时器，我想在终端视图上显示该计时器，以便客户知道该提示已经有多长时间了，显然计时器只能在csr视图页面上初始化，不能在终端视图上而终端视图仅在宽屏幕

关于如何从其他页面获取或借用div的任何建议。我的页面包括两个

csr视图（客户服务代表终端）

和

客户终端视图

现在我正在做一个排队系统，我想做的是将

csr

视图的部分div共享到

终端

视图

terminal

视图只是一个数据视图，比如que code，让他们知道下一个被我们的

csr

调用的人，等等，我想在这里包括

csr

生成的每个que的计时器，必须设置一个计时器，我想在

终端

视图上显示该计时器，以便客户知道该提示已经有多长时间了，显然计时器只能在

csr

视图页面上初始化，不能在

终端

视图上

而

终端

视图仅在宽屏幕电视/显示器上观看，因此用户/客户无法导航

我的计时器代码在这里

    <div class="stopwatch">
        <div class="controls">
            <button class="start">Start</button>
            <button class="stop">Stop</button>
            <button class="reset">Reset</button>
        </div>
        <div class="display">
            <span class="minutes">00</span>:<span class="seconds">00</span>:<span class="centiseconds">00</span>
        </div>
    </div>

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

如果您希望

获取或借用的DIV
窗口可以在主窗口上使用标准超链接或类似链接打开，那么在捕获对
这里有两个基本的html页面作为示例
index.html
显示“借用”数据的主页面

document.addEventListener（'DOMContentLoaded'，function（）{
const view=document.getElementById（'view'）；
window.addEventListener（'message'，函数（e）{
view.innerHTML=e.data
});
});

source.html
带有计时器/时钟的页面（要“借用”的数据）

#时钟{边框：1px纯黑色；填充：1rem；文本对齐：中心；宽度：50%；浮点：无；边距：自动}
（功能（）{
const target=window.opener；
（功能（）{
document.getElementById（'clock'）.innerHTML=new Date（）.toLocaleTimeString（'en-GB'）；
target.postMessage（document.getElementById（'clock'）.innerHTML，'*'））
setTimeout（arguments.callee，1000）；
})();
})();

在上面的source.html
页面中，有一个简单的时钟正在运行，它充当与原始页面共享的数据。在您的代码中，这将是您的计时器
只需创建一个单独的视图，该视图包含在两个视图页面中。两个页面是否同时在不同的选项卡中运行？您可以查看window.postMessage
在窗口/选项卡之间发送数据它们都在不同的选项卡上运行终端视图只是另一个选项卡，可以在不同的监视器上查看（扩展）@KrishnaJonnalagadda如果您的建议是rquire或include，我想它只是创建一个单独的计时器，很高兴我能提供一些帮助，帮助你解决问题。luckOne值得注意的一点是（您会发现Mozilla文档中提到了这一点）注意消息的来源

——您应该在消息侦听器中添加一个检查，以检查消息的来源，并防止未经授权的消息被您的代码处理。然而，在企业环境中，这不应该是一个问题 RQS |_csrpage(index.php where stopwatch is included) |_terminalview(index.php inside here must display) they are both from separate folder

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <script>
            document.addEventListener('DOMContentLoaded', function(){
                const view=document.getElementById('view');

                window.addEventListener('message', function(e){
                    view.innerHTML=e.data
                });
            });
        </script>
    </head>
    <body>
        <a href='source.html' target='_blank'>Open Source page with clock/timer</a>
        <div id='view'></div>
    </body>
</html>

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>#clock{border:1px solid black;padding:1rem;text-align:center;width:50%;float:none;margin:auto}</style>
    </head>
    <body>
        <div id='clock'></div>
        <script>
            (function(){
                const target=window.opener;
                (function(){
                    document.getElementById('clock').innerHTML=new Date().toLocaleTimeString('en-GB');
                    target.postMessage( document.getElementById('clock').innerHTML, '*' )
                    setTimeout( arguments.callee, 1000 );
                })();
            })();
        </script>
    </body>
</html>