实现可多次触发分屏的按钮：点击加载PF1.html并持续分屏

我来帮你搞定这个需求——要实现点击按钮生成加载PF1.html的分屏，还支持多次点击新增窗口，同时解决尺寸调整的问题，咱们可以用iframe来加载外部页面，再配合JavaScript动态计算每个分屏的宽度，具体实现如下：

完整代码实现 #

HTML（PF1.1.html） #

首先在页面里添加触发按钮，以及一个用来容纳所有分屏的容器：

<button id="addSplitBtn">新增分屏窗口</button>
<div id="splitContainer"></div>

CSS #

调整分屏样式，去掉固定的50%宽度，让它可以动态设置，同时保持全屏布局：

/* 基础分屏样式 */
.split {
  height: 100vh;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
  border-right: 1px solid #ccc; /* 可选：添加分隔线区分分屏 */
}

/* 按钮样式，避免被分屏覆盖 */
#addSplitBtn {
  position: fixed;
  z-index: 9999;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  cursor: pointer;
}

/* 加载外部页面的iframe样式 */
.split iframe {
  width: 100%;
  height: 100%;
  border: none;
}

JavaScript #

处理按钮点击事件，每次点击新增一个加载PF1.html的分屏，并动态调整所有分屏的宽度：

const addSplitBtn = document.getElementById('addSplitBtn');
const splitContainer = document.getElementById('splitContainer');

addSplitBtn.addEventListener('click', () => {
  // 创建分屏容器
  const splitDiv = document.createElement('div');
  splitDiv.className = 'split';
  
  // 创建iframe加载PF1.html
  const iframe = document.createElement('iframe');
  iframe.src = 'PF1.html'; // 确保PF1.html和当前页面同域，否则会有跨域限制
  splitDiv.appendChild(iframe);
  
  splitContainer.appendChild(splitDiv);
  
  // 动态计算所有分屏的宽度
  const splitCount = splitContainer.children.length;
  const splitWidth = `${100 / splitCount}%`;
  
  // 给每个分屏设置宽度和左侧定位
  Array.from(splitContainer.children).forEach((split, index) => {
    split.style.width = splitWidth;
    split.style.left = `${index * (100 / splitCount)}%`;
  });
});

关键细节说明 #

• 加载外部页面：用iframe是最直接的方式，只要PF1.html和PF1.1.html在同一域名下（或者配置了跨域权限），就能正常加载。如果是跨域场景，需要目标页面允许跨域嵌入。
• 动态调整尺寸：每次新增分屏后，计算当前分屏的总数量，用100% / 数量得到每个分屏的宽度，同时设置每个分屏的left值，让它们依次排列在屏幕上。
• 避免按钮被覆盖：给按钮设置更高的z-index，确保它始终在分屏上方，不会被遮挡。

这样点击按钮就可以不断新增加载PF1.html的分屏，每个分屏都会自动调整宽度来均分整个屏幕啦！

内容的提问来源于stack exchange，提问作者Rui