拆分一个 HTML 页面以在多个屏幕上显示不同的视图答案

【问题标题】：Split one HTML page to display different views on multiple screens拆分一个 HTML 页面以在多个屏幕上显示不同的视图
【发布时间】：2015-09-02 14:33:04
【问题描述】：

我有两个屏幕，分别是屏幕 1 和屏幕 2，以及一个带有 JavaScript/JQuery 的 HTML 页面。
我想要做的是将 HTML 拆分为两个视图。一个在屏幕 1 上，另一个在屏幕 2 上。
屏幕 1 有一个简单的视图（例如供客户观看的电影院屏幕），屏幕 2 具有所有控件（例如对另一端的人可见）。任何可能的解决方案？

【问题讨论】：

你已经尝试过了吗？
除了创建两个不同的 HTML 页面以在两个屏幕上运行并在它们之间放置代理服务器进行通信之外，我想不出任何解决方案。
为什么？唯一可能的解决方案是 1) 退出全屏模式并将浏览器拉伸到几乎您的屏幕高度和两个屏幕的宽度或 2) 当您无法在两个窗口之间进行通信时，在右侧屏幕上有一个浏览器窗口，在左侧屏幕上有一个浏览器窗口所以你必须有两个不同的网站。
您可以在一个页面上试验两个iframes。

标签： javascript jquery html screen screensharing

【解决方案1】：

最好的解决方案是拥有 2 个不同的页面，毕竟这是一个系统而不是页面。
但是，既然您想要解决方法，请使用Bootstrap（它是响应，因此应该很容易适应 2 屏幕显示）。

将 Bootstrap 添加到 HTML

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

到 HTML

<div class="wrapper-fluid">
  <div class="container-fluid">
    <div class="row">
      <div id="screen1" class="col-md-6">
        <!-- PAGE 1 HERE -->
      </div>
      <div id="screen2" class="col-md-6">
        <!-- PAGE 2 HERE -->
      </div>
    </div>
  </div>
</div>

到 CSS：

#screen1 {
  background-color: blue;
  height: 900px;
}
#screen2 {
  background-color: green;
  height: 900px;
}

【讨论】：

为此我让我的两个屏幕充当一个大屏幕。
哦，我误解了你的问题，你的意思是更多的东西？ stackoverflow.com/questions/5277482/…stackoverflow.com/questions/8211128/…

【解决方案2】：

这是老派，但我最近使用锚标记内的“目标”属性做了类似的事情。打开两个浏览器窗口，将“显示”一个设置为全屏，第一个屏幕（控制屏幕）上的链接针对第二个浏览器窗口。例如：

<a target='songs' href='/freebird.html'>Freebird</a>

无需编程。

【讨论】：

如何在两者之间传输数据。以json的形式说？我需要双向控制。考虑到上面的例子，如果客户在屏幕 1 上选择座位，我需要更新屏幕 2 的 DOM。同样，如果柜台人员在屏幕 2 上进行了一些更改，我想更新屏幕 1。