如何将网页的一部分“流式传输”到另一个窗口？

Question

我想将网页上的某个容器流式传输到另一个窗口。

设置类似于销售点系统。即面向操作员的显示屏和第二个面向客户的显示屏。

面向操作员的显示将具有一个包含所有工具栏，菜单等的窗口。而面向客户的显示将仅从第一个面向操作员的窗口显示某个容器。

如下所示：操作员显示屏将包含完整的网页内容。客户显示中只会包含#output容器。

操作员显示

<div id="toolbar">
    <ul>
         <li><button>Action 1</button></li>
         <li><button>Action 2</button></li>
    </ul>
</div>
<div id="output">
   //OUTPUT GOES HERE
</div>

客户展示

<div id="output">
   //OUTPUT GOES HERE
</div>

反正有这样做吗？

Answer 1

由于您将“流”用引号引起来，所以我认为您正在寻找针对此问题的不同解决方案。

在浏览器中，您可以轻松地打开一个新窗口并从主页进行控制，我创建了一个实现案例的小片段，在其中一个窗口中，您可以添加项目并将其显示在另一个窗口上。

这些行最重要：

const posWindow = window.open("about:blank", "customerDisplayWindow", "height: 50,width: 50");
posWindow.document.body.innerHTML = '<h2>Items</h2><ul id="item-display"></ul>';

与修改文档相比，您可以想出更干净的解决方案，但是您知道了。

https://jsfiddle.net/jhd5L8wa/1/

我建议阅读有关Window.open()（尤其是第三个参数windowFeatures）的MDN页面，以了解有关打开的窗口的外观和行为的更多信息。