拆分一個HTML頁面以在多個屏幕上顯示不同的視圖

我有兩個屏幕，分別是Screen 1和Screen 2以及一個帶有JavaScript/JQuery的HTML頁面。
我想要做的是將HTML分成兩個視圖。一個在屏幕1上，另一個在屏幕2上。
屏幕1具有簡單的視圖（例如用於客戶觀看的電影屏幕）並且屏幕2具有所有控制（例如對於另一端的人可見）。任何可能的解決方案？拆分一個HTML頁面以在多個屏幕上顯示不同的視圖

來源

2015-09-02 Anakooter

您是否嘗試過某些東西？ – MaxZoom

我無法想出任何解決方案，除了創建兩個不同的HTML頁面以在兩個屏幕上運行並在它們之間放置代理服務器進行通信之外。 – Anakooter

爲什麼？唯一可行的解決方案是1）退出全屏模式，並將瀏覽器延伸至幾乎屏幕高度和兩個屏幕的寬度，或者2）當兩個窗口之間無法通信時，右側有一個瀏覽器窗口，左側有一個瀏覽器窗口所以你必須有兩個不同的網站。 –

這是一所老學校，但我最近剛剛做了這樣的事情，使用錨標記中的「target」屬性。打開兩個瀏覽器窗口，將「顯示」一個設置爲全屏，並將第一個屏幕（控制屏幕）上的鏈接指向第二個瀏覽器窗口。例如：

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

無需編程。

來源

2015-09-02 14:46:33 theglossy1

我將如何在兩者之間傳輸數據。以json的形式說？我需要雙向控制。考慮到上面的例子，如果客戶在屏幕1上選擇座位，我需要更新屏幕2的DOM。同樣，如果櫃檯人員在屏幕2上做了一些更改，並且我想更新屏幕1. – Anakooter

最好的解決辦法是有2個不同的頁面，畢竟它是一個系統，而不是一個頁面。
但是，由於您想要解決方法，請使用Bootstrap（它是響應式，因此應該很容易適應2屏幕顯示）。

添加引導到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; 
}

來源

2015-09-02 15:35:01 warkentien2

對於此I讓我的兩個屏幕成爲一個大屏幕。 – Anakooter

哦，我誤解了你的問題，你的意思是更多的東西呢？ http://stackoverflow.com/questions/5277482/can-i-control-two-browser-windows-with-one-html5-app http://stackoverflow.com/questions/8211128/multiple-distinct-pages一體式-HTML文件 – warkentien2

拆分一個HTML頁面以在多個屏幕上顯示不同的視圖

回答

相關問題