无法修改HTML代码时，如何用split.js实现页面水平拆分？

完全可以实现，无需修改原HTML代码，仅通过JavaScript即可完成。以下是具体实现步骤和代码示例：

核心思路 #

Split.js需要两个独立的容器作为拆分面板，因此我们需要通过JS动态重构页面结构，将原有内容迁移到其中一个面板，再初始化拆分功能。

实现代码 #

// 动态加载Split.js脚本
function loadSplitJS() {
  const script = document.createElement('script');
  script.src = 'https://unpkg.com/split.js/dist/split.min.js';
  script.onload = initSplit;
  document.head.appendChild(script);
}

function initSplit() {
  // 获取页面原有容器
  const fooContainer = document.querySelector('.Foo');
  const originalContent = fooContainer.querySelector('div[align=center]');

  // 创建两个拆分面板
  const topPane = document.createElement('div');
  topPane.classList.add('split-top');
  topPane.appendChild(originalContent);

  const bottomPane = document.createElement('div');
  bottomPane.classList.add('split-bottom');
  // 可自定义底部面板初始内容
  bottomPane.innerHTML = '<div align="center">底部面板区域</div>';

  // 将面板插入到原容器中
  fooContainer.appendChild(topPane);
  fooContainer.appendChild(bottomPane);

  // 添加必要样式（确保拆分功能正常工作）
  const styleSheet = document.createElement('style');
  styleSheet.textContent = `
    .Foo {
      height: 100vh;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    .split-top, .split-bottom {
      overflow: auto;
      box-sizing: border-box;
    }
  `;
  document.head.appendChild(styleSheet);

  // 初始化Split.js水平拆分（vertical为垂直方向拆分，即上下分栏）
  Split(['.split-top', '.split-bottom'], {
    direction: 'vertical',
    size: 70, // 顶部面板初始占比70%
    gutterSize: 10, // 拆分线宽度
    cursor: 'row-resize' // 鼠标悬停拆分线时的样式
  });
}

// 页面加载完成后执行
window.addEventListener('load', loadSplitJS);

说明 #

1. 动态加载Split.js：通过创建<script>标签自动引入Split.js库，无需手动修改HTML。
2. 结构重构：将原有内容迁移到新创建的顶部面板，同时生成底部面板，确保Split.js有两个可操作的容器。
3. 样式适配：通过JS添加必要的CSS样式，保证容器高度、溢出行为符合拆分需求。
4. 拆分配置：可根据需求调整size（面板初始占比）、gutterSize（拆分线宽度）等参数。

内容的提问来源于stack exchange，提问作者David.P