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