本文介绍如何使用 JavaScript 的 window.open() 创建子窗口，并通过父窗口动态修改其 HTML 内容，适用于 D&D 桌游中 DM 屏与地图屏的实时联动等场景。
本文介绍如何使用 javascript 的 `window.open()` 创建子窗口，并通过父窗口动态修改其 html 内容，适用于 d&d 桌游中 dm 屏与地图屏的实时联动等场景。
在 Web 开发中，实现“父窗控制子窗”的核心在于：window.open() 返回一个对新窗口的引用对象，该对象可直接访问其 document、location、postMessage 等属性和方法。只要两个窗口同源（协议、域名、端口一致），父窗口即可安全地操作子窗口 DOM。
以下是一个简洁可靠的实现示例：
<button id="openMap">打开地图屏</button>
<button id="loadForest">显示森林地图</button>
<button id="loadDungeon">显示地牢地图</button>
<script>
let mapWindow = null;
document.getElementById('openMap').addEventListener('click', () => {
// 打开空白新窗口（推荐指定尺寸以提升体验）
mapWindow = window.open('', '_blank', 'width=1024,height=768,menubar=no,toolbar=no,resizable=yes,scrollbars=yes');
if (!mapWindow || mapWindow.closed) {
alert('弹窗被浏览器拦截，请允许弹出窗口后重试。');
return;
}
// 初始化子窗口内容
mapWindow.document.write(`
<!DOCTYPE html>
<html><head><title>DM 地图屏</title>
<style>body { margin:0; padding:20px; font-family:sans-serif; text-align:center; }</style>
</head><body><h2>等待地图加载...</h2></body></html>
`);
mapWindow.document.close(); // 必须调用，否则文档处于“加载中”状态，无法安全写入
});
// 动态更新子窗口内容
document.getElementById('loadForest').addEventListener('click', () => {
updateMapContent('? 森林全景图', '/images/forest.jpg');
});
document.getElementById('loadDungeon').addEventListener('click', () => {
updateMapContent('? 古老地牢平面图', '/images/dungeon.png');
});
function updateMapContent(title, imgUrl) {
if (!mapWindow || mapWindow.closed) {
alert('地图屏未打开，请先点击“打开地图屏”。');
return;
}
mapWindow.document.body.innerHTML = `
<h2>${title}</h2>
<img src="${imgUrl}" alt="${title}" style="max-width:100%; max-height:60vh; border:2px solid #333;">
<p><small>最后更新：${new Date().toLocaleTimeString()}</small></p>
`;
}
</script>✅ 关键要点说明：
- 使用 window.open('', '_blank', 'features') 创建新窗口，并务必保存返回值（如 mapWindow），这是后续通信的唯一句柄；
- 首次写入内容时，推荐使用 document.write() + document.close() 初始化完整 HTML 结构，避免因子窗未加载完成导致 DOM 操作失败；
- 后续更新请统一使用 mapWindow.document.body.innerHTML 或标准 DOM API（如 createElement），确保内容可维护；
- ⚠️ 跨域限制：若子窗口加载了不同源的 URL（如 https://example.com/map.html），则父窗口将无法访问其 document —— 此时应改用 postMessage() 进行安全跨源通信；
- ? 安全提示：现代浏览器默认拦截无用户手势触发的 window.open()（如异步回调中调用），因此所有 open() 必须绑定在明确的用户事件（如 click）内；
- ? 扩展建议：后续集成文件夹自动读取时，可借助本地开发服务器（如 Vite、Live Server）提供 /api/gallery 接口返回图片列表，再由父页动态渲染缩略图并绑定点击事件。
掌握这一模式后，你不仅能实现 DM 屏与地图屏的实时切换，还可延伸构建多屏协同系统——例如同步播放音效、高亮 NPC 位置、或推送战斗指令，真正打造沉浸式 D&D 数字桌游体验。
