Javascript 如何将浏览器视口拆分为两个水平窗格
直到HTML4，在不同的窗格中加载不同HTML文件的框架才有可能创建布局 我想做的是获得类似的结果，但在屏幕上加载并显示同一文档的两个不同部分 我的理想范例是MS Word，它允许将窗口分为两个水平部分，以便在同一文档的每个不同部分中显示（在比较文档的不同部分或在长文档中将部分从一个遥远的方向移动到另一个方向时非常有用）或MS Excel（即使是LibreOffice或OpenOffice Calc也有类似的功能），它允许出于相同的原因将工作表的窗格拆分为2（甚至4）个部分，或者使顶部的某些行或右侧的某些列（例如行或列标题）保持可见 下图所示： 红色箭头表示将窗口文档一分为二的边距，允许单独滚动每个部分，正如您可以看到的，在上窗格中的行数是3，在下窗格中的行数是21。此外，边距的大小可以调整 是否可以使用香草JS和HTML&CSS（请不要使用jQuery或其他框架）来实现这一点 限制条件：Javascript 如何将浏览器视口拆分为两个水平窗格,javascript,html,css,window,Javascript,Html,Css,Window,直到HTML4，在不同的窗格中加载不同HTML文件的框架才有可能创建布局 我想做的是获得类似的结果，但在屏幕上加载并显示同一文档的两个不同部分 我的理想范例是MS Word，它允许将窗口分为两个水平部分，以便在同一文档的每个不同部分中显示（在比较文档的不同部分或在长文档中将部分从一个遥远的方向移动到另一个方向时非常有用）或MS Excel（即使是LibreOffice或OpenOffice Calc也有类似的功能），它允许出于相同的原因将工作表的窗格拆分为2（甚至4）个部分，或者使顶部的某些行或
contenteditableaddEventListener（）function splitView()
{
var tgtSrc = location.href;
var frameset = '<frameset rows="*,*">' +
'<frame name="' + upFrame + '" src="' + tgtSrc + '">' +
'<frame name="' + dwFrame + '" src="' + tgtSrc + '">' +
'</frameset>';
document.write(frameset);
}
也可用于解决部分问题（在编辑或将数据插入tbody时保持thead卡滞），但不幸的是，它在AD元素上似乎没有达到预期的效果，至少在某些浏览器上是如此。它也解决了部分问题：事实上，如果需要将来自同一个表或不同表的不同部分的数据比较到同一个文档中，这个解决方案一点也不好。因此，还需要一些其他的东西。有bably比我想出的黑客更好的解决方案，但让我们试试看 如果要获取整个页面并将其拆分，可以使用框架集解决方案，但不必让浏览器加载两次资源，只需复制其HTML并将其写入框架即可：
<html>
<head>
<style type="text/css">
body { color: red; } /* Only used to test if CSS is copied as well
</style>
</head>
<body>
Hello world!
</body>
<script type="text/javascript">
function inFrame () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
function buildFrames() {
const documentHTML = document.documentElement.innerHTML;
const frameset = document.createElement('frameset');
frameset.rows = '*,*';
const frame1 = document.createElement('frame');
const frame2 = document.createElement('frame');
document.documentElement.innerHTML = '<html><body></body></html>';
frameset.appendChild(frame1);
frameset.appendChild(frame2);
document.body.appendChild(frameset);
frame1.src = 'data:text/html;charset=utf-8,' + encodeURI(documentHTML);
frame2.src = 'data:text/html;charset=utf-8,' + encodeURI(documentHTML);
}
if (!inFrame()) {
buildFrames();
}
</script>
</html>
body{color:red；}/*仅用于测试是否也复制了CSS
你好，世界！
函数inFrame（）{
试一试{
返回window.self！==window.top；
}捕获（e）{
返回true；
}
}
函数buildFrames（）{
const documentHTML=document.documentElement.innerHTML；
const frameset=document.createElement（'frameset'）；
frameset.rows='*，*'；
const frame1=document.createElement（'frame'）；
const frame2=document.createElement（'frame'）；
document.documentElement.innerHTML=''；
frameset.appendChild（frame1）；
frameset.appendChild（frame2）；
document.body.appendChild（frameset）；
frame1.src='data:text/html；charset=utf-8'，+encodeURI（documentHTML）；
frame2.src='data:text/html；charset=utf-8'，+encodeURI（documentHTML）；
}
如果（！inFrame（））{
buildFrames（）；
}
但是，您需要注意在页面中执行的javascript代码。正如您所看到的，我还必须检查页面是否已经在框架中，否则它会一直将框架集附加到文档中（或者至少在浏览器阻止它之前）.只是好奇，如果是你电脑上的本地文件，为什么你要在浏览器中编辑csv文件中的表格数据，而不是仅仅使用上面提到的Excel之类的程序的本地功能？或者如果你想在浏览器中进行编辑，google sheets允许分屏吗？没有不敬，我只是不明白为什么我们不能这是一个专门为这类工作而优化的计划 如果您想继续使用框架，您应该能够将文件加载回一个框架，并将innerHTML从一个框架复制到另一个框架，如下所示。如果您使用会话存储，则保存对该框架和csv文件的编辑应该更快，但从会话存储加载，而不是从文件加载
window.frames[upFrame].document.body.innerHTML = window.frames[dwFrame].document.body.innerHTML;
window.frames[upFrame].document.body.innerHTML = window.frames[dwFrame].document.body.innerHTML;