Как разделить окно просмотра браузера на две горизонтальные панели

До HTML 4 можно было создавать макеты с фреймами, загружающими разные HTML файлы в разные панели.

То, что я хочу сделать, - добиться аналогичного результата, но загружать и показывать на экране две разные части того же документа.

Моя идеальная парадигма - это MS Word, которая позволяет разбивать окно на две горизонтальные части, чтобы показывать в каждом из разных разделов того же документа (чрезвычайно полезно при сравнении разных частей документа или при перемещении частей с одной отдаленной стороны на другую на длинных документы) или MS Excel (даже LibreOffice или OpenOffice Calc имеют аналогичную функцию), что позволяет разделить панель листа в 2 (или даже в 4) разделах по той же причине или сохранить видимые некоторые строки сверху или некоторые столбцы в (например, заголовок строки или столбца).

На следующем рисунке показано:

Красная стрелка указывает на водосточный желобок, который разбивает оконный документ на две части, позволяя прокручивать каждую часть отдельно, так как вы можете видеть, как выглядит номер строки, которая на верхней панели составляет 3 и 21 на нижней панели. Также водосточный желоб является изменяемым.

Можно ли это сделать с помощью vanilla JS с HTML и CSS (без jQuery или другой структуры, пожалуйста)?

Ограничения:

1. Документ должен быть одинаковым для всех 2 панелей (сверху и снизу) (старый набор фреймов должен загружать два разных документа или один и тот же документ дважды: я использую это уже, но, если возможно, я хочу более чистый подход!)
2. Сепаратор (желоб?) Должен быть изменен
3. Две разные части документа прекрасно синхронизированы в том смысле, что если я что-то модифицирую (с помощью свойства contenteditable) в верхней (или нижней) панели, нижняя (или верхняя) панель мгновенно показывает редактирование, как только MS Word или Excel... поэтому, если я удалю что-то в любой нижней таблице таблицы, даже верхнее содержимое будет соответствующим образом скорректировано (даже размер столбца), как это происходит с MS Word, Excel, Calc и т.д.
4. Сплит-просмотр будет включен и выключен при нажатии на определенную кнопку
5. Мне не нужны старые браузеры, только сценарий ECMA 2015 или более поздние
6. В файле HTML есть много прослушивателей событий, связанных с addEventListener() с различными элементами HTML, такими как кнопки, текстовые поля, флажки, выборки и т.д. Это означает, что ответное решение должно иметь возможность сохранять их в целости и работать в обеих панелях.

Где я буду использовать это?

У меня есть куча таблиц в локальном HTML файле (без участия веб-сервера), который загружает данные из файла csv или из хранилища сеансов браузера, и мне часто приходится сравнивать данные из разных точек или держать заголовок фиксированным сверху, а прокрутка остальной части конкретной таблицы или при вставке новых данных или обновлении старых данных в одном из них, чтобы постоянно видеть, в какую ячейку я вставляю или обновляю данные.

Ситуация:

На данный момент я использую следующий код:

function splitView()
{
    var tgtSrc = location.href;
    var frameset =  '<frameset rows="*,*">' +
                        '<frame name="' + upFrame + '" src="' + tgtSrc + '">' +
                        '<frame name="' + dwFrame + '" src="' + tgtSrc + '">' +
                    '</frameset>';
    document.write(frameset);   
}

Вышеуказанная функция разбивает по горизонтали текущую оконную панель в двух кадрах, называемых upFrame и dwFrame (это две переменные). После расщепления перестраиваемый желоб помещается между двумя кадрами.

Плюс алгоритм для синхронизации обоих экземпляров данных документа: он работает, сохраняя при каждом редактировании данных в одном кадре данные в хранилище сеансов этого кадра и перезагружает одни и те же данные в другой фрейм.

Это работает, но кадры не подходят, я бы хотел избавиться от необходимости дважды загружать документ и синхронизировать каждый экземпляр со всем относительным недостатком. К сожалению, это не окончательный ответ, который я ищу, потому что у него есть некоторые недостатки:

1. Теги фреймов и фреймов не поддерживаются в современных HTML5-совместимых файлах, даже если они все еще поддерживаются браузерами
2. Файл должен быть загружен дважды (один раз за кадр), это означает заметную нехватку производительности и трудно синхронизировать в реальном времени любые изменения в одном кадре с другим фреймом (возможно двунаправленная синхронизация, поэтому редактирование может выполняться как в показанной части документа). К сожалению, даже требуемый процесс синхронизации означает снижение производительности, которая блокирует пользовательский интерфейс в течение некоторого момента каждый цикл синхронизации
3. Процесс синхронизации не в режиме реального времени, он имеет некоторую задержку (несколько секунд): если я делаю это короче, у меня есть большая нехватка возможностей, которая включает замораживание браузера

Поэтому я открыт для лучших ответов с более чистыми и более эффективными решениями. (Я даже предложил разработчикам Chrome внедрить в него функцию в браузере, потому что я действительно думаю, что это обязательная функция, особенно учитывая расширяющиеся онлайн-системы управления данными).

Что я ищу:

Использование вышеуказанного кода, который я использую, уже не является обязательным: ответы могут также предлагать совершенно другой подход.

Таким образом, окончательное решение, которое я ищу, похоже на функцию разделения, используемую электронной таблицей Google (если они могут, я надеюсь, мы тоже могли бы), вот изображение с примером

Посмотрите внимательно на это: есть желоб, который можно перемещать горизонтально (есть вертикальный желоб, но мне все равно, что вертикальное расщепление, просто горизонтальное), и когда таблица листает вниз, строки исчезают под ней: в факт, что первая строка над желобом - это n. 1 первая строка вниз по желову равна n. 45.

Также обратите внимание на маленькую двуглавую белую стрелку, обозначенную большой красной стрелкой в крайнем левом углу изображения.

Я попытался изучить подход к электронной таблице Google, чтобы перепроектировать его и извлечь основные функции и адаптировать одну и ту же "философию" к моему локальному приложению, но я недостаточно хорош, чтобы понять, что они сделали точно: мой подозреваемый заключается в том, что когда "таблица" строка попадает в водосток "просто скрывается за ней", но я не уверен.

IMHO - это функция, которую каждый браузер (даже для портативных устройств) должен реализовывать изначально и без использования старой технологии фреймов, которые больше не поддерживаются в html 5. К сожалению, эта возможность разделить один и тот же документ для отображения и редактирования разных его части (например, как очень длинная таблица), сохраняя каждую панель с обновлением, не является (пока) функцией браузера, поэтому в то же время... необходимо обходное решение.

Обратите внимание:

Свойство CSS

position: sticky;

также можно было бы решить часть проблемы (чтобы сохранить заставку при редактировании или при вставке данных в tbody), но, к сожалению, она не работает так, как ожидалось, на этих элементах, по крайней мере, на некоторых браузерах. Также он решает только часть проблемы: на самом деле, если для сравнения данных из разных частей одной и той же таблицы или разных таблиц в один и тот же документ это решение не очень хорошо. Так что нужно другое.

Ответы

window.frames[upFrame].document.body.innerHTML = window.frames[dwFrame].document.body.innerHTML;

<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>