现代分屏应优先用CSS Grid替代废弃的frameset和易跨域的iframe；同源iframe需设宽高、lazy加载、overflow:hidden；跨域通信必须用postMessage并校验origin。
用 <iframe> 实现分屏，但别直接塞 URL
直接写 <iframe src="a.html"> 看似简单，实际容易触发跨域、加载失败或白屏。现代页面分屏更常见的是用同一域名下的局部 HTML 片段，或通过 JS 动态控制内容源。
实操建议：
- 确保
src指向同源路径（如"./panel-left.html"），避免跨域报错Blocked a frame with origin ... - 加
loading="lazy"防止非首屏 iframe 拖慢主页渲染 - 设固定宽高（如
width="50%" height="600"）或用 CSS Flex/Grid 控制布局，否则默认 300×150 像素太小 - 禁用滚动条干扰体验：加
scrolling="no"（HTML5 已废弃，改用 CSSoverflow: hidden更可靠）
CSS Grid 布局做响应式分屏，比 frameset 现代得多
<frameset> 已被 HTML5 废弃，浏览器兼容性差，且无法与现代 JS 交互。用 CSS Grid 是当前主流做法，灵活、可响应、易调试。
典型结构示例：
立即学习“前端免费学习笔记（深入）”；
<div class="split-container"> <aside class="panel-left"></aside> <main class="panel-right"></main> </div>
对应 CSS：
.split-container {
display: grid;
grid-template-columns: 300px 1fr; /* 左栏固定 300px，右栏自适应 */
height: 100vh;
}
.panel-left { overflow-y: auto; }
.panel-right { overflow: hidden; }注意点：
- 用
minmax(300px, 1fr)可让左栏最小 300px、最大占一半，适配不同屏幕 - 若需拖拽调整分屏宽度，不能只靠 CSS —— 得加 JS 监听
mousedown+mousemove，动态修改grid-template-columns - 移动端慎用双栏：用媒体查询在
max-width: 768px时改为单列堆叠，否则小屏体验极差
用 window.open() 开多窗口？小心被浏览器拦截
想开独立窗口实现“真分屏”，window.open() 是唯一原生方案，但现代浏览器默认拦截无用户手势触发的弹窗（比如 onload 里调用）。
能用的前提：
- 必须由用户显式操作触发（如
button onclick） - URL 必须同源，否则子窗口无法通过
window.opener通信 - 传参只能靠 URL query 或
localStorage同步，不要指望window.opener.xxx在跨域下可用 - 关闭子窗口后，父页拿不到回调，得自己监听
beforeunload或轮询window.closed
一个安全调用示例：
<button onclick="openSplitWindow()">打开右侧面板</button>
<script>
function openSplitWindow() {
const w = window.open('./split-right.html', '_blank', 'width=800,height=600');
if (!w || w.closed) alert('弹窗被拦截，请允许');
}
</script>嵌套 <iframe> 通信：别漏掉 postMessage 和 origin 校验
分屏后各区域常需交换数据（比如左栏选中 ID，右栏刷新详情）。若 iframe 同源，可直接 DOM 访问；但只要涉及部署分离、微前端或测试环境，就必须走 postMessage。
关键细节：
- 发消息方必须指定目标窗口（
iframe.contentWindow）和targetOrigin（别偷懒写"*"，生产环境必须校验 origin） - 收消息方必须检查
event.origin，否则可能被恶意 iframe 伪造消息 - iframe 加载完成前发消息会失败，先监听
iframe.onload或用setTimeout重试 - 若需双向通信，建议约定统一消息格式，例如：
{ type: 'SELECT_ITEM', payload: { id: 123 } }
漏掉 origin 校验是线上常见安全隐患，尤其当 iframe 内容来自第三方或 CMS 动态注入时。
