Javascript分割屏幕視圖

Question

是否可以使用javascript進行分割屏幕視圖以同時查看網站的兩個部分？當您需要編輯或查看一個文檔的兩個單獨部分時，我期待能使Microsoft Word具有這種功能。

Answer 1

您可以使用框架標籤。

<frameset cols="250px,*"> 
    <frame src="/your/menu/bar"> 
    <frameset rows="50%,*"> 
    <frame src="/your/splitted/content"> 
    <frame src="/your/splitted/content"> 
    </frameset> 
</frameset> 

每一幀可以通過JS

Answer 2

我不知道的東西，是直接準備好這個被操縱，但我有一個想法，可以幫助你。

使用畫布和製作文檔的截圖。 將畫布放在屏幕的一部分上，並將實際文檔放在anoter上。 用戶在畫布上單擊的時刻，切換實際項目和畫布的位置。 你可以逃避這種欺騙，因此焦點只能在一個地方一次。 當然，你需要重新設置canvas oftern，你需要使用滾動位置，但它可以變得很好。

Answer 3

我發現split.js

Split.js是創建可調拆分視圖或窗格

HTML輕便，實用unopinionated：

<div id="a" class="split split-horizontal"> 
    <div id="c" class="split content"></div> 
    <div id="d" class="split content"></div> 
</div> 
<div id="b" class="split split-horizontal"> 
    <div id="e" class="split content"></div> 
    <div id="f" class="split content"></div> 
</div> 

的Javascript：

Split(['#a', '#b'], { 
    gutterSize: 8, 
    cursor: 'col-resize' 
}) 
Split(['#c', '#d'], { 
    direction: 'vertical', 
    sizes: [25, 75], 
    gutterSize: 8, 
    cursor: 'row-resize' 
}) 
Split(['#e', '#f'], { 
    direction: 'vertical', 
    sizes: [25, 75], 
    gutterSize: 8, 
    cursor: 'row-resize' 
}) 

Demo