gpt4 book ai didi

javascript - 从另一个实时页面共享

转载 作者:行者123 更新时间:2023-11-30 13:54:20 24 4
gpt4 key购买 nike

关于如何从另一个页面获取或借用 div 的任何建议。我的页面由两个 csr view(customer service representative terminal) 组成和 customers terminal view

现在我正在做一个排队系统,我想做的是共享 csr 的 div 的一部分。查看 terminal查看

terminal view 只是一个数据 View ,比如查询代码,让他们知道我们的 csr 的下一个调用者是谁。等等,我想在其中包含 csr 的每个问题的计时器制作完成后,必须设置一个计时器,我想在 terminal 上显示这个计时器也可以查看自身,以便客户知道该提示已经过了多长时间,显然计时器只能在 csr 上初始化只能查看页面,不能在 terminal 上查看

terminal View 仅在宽屏电视/显示器上查看,因此用户/客户无法导航

我的定时器代码在这里

    <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> <div class="display">并将其显示在 terminal 上查看,如果队列完成,计时器将停止,并且必须初始化下一个相同的进程。

我正在寻找一些类似的问题,但它并不是我真正需要的
jQuery get variable value from another html page

我的结构化页面是这样的

RQS |_csrpage(index.php where stopwatch is included) |_terminalview(index.php inside here must display)they are both from separate folder

最佳答案

如果包含您希望获取或借用DIV 的窗口可以使用标准超链接或主窗口上的类似内容打开,那么共享就相当简单页面之间的数据使用 postMessage在捕获对 opening page 的引用之后

例如,这里有两个基本的 html 页面。

index.html显示“借”数据的主页面

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

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

在上面的source.html 页面中,有一个简单的时钟运行,作为与原始页面共享的数据。在您的代码中,这将是您的计时器

关于javascript - 从另一个实时页面共享 <div>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57603818/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com