本文介绍如何使用 JavaScript 的 window.open() 创建子窗口，并通过父窗口动态修改其 HTML 内容，适用于 D&D 桌游中 DM 屏与地图屏的实时联动等场景。

本文介绍如何使用 javascript 的 `window.open()` 创建子窗口，并通过父窗口动态修改其 html 内容，适用于 d&d 桌游中 dm 屏与地图屏的实时联动等场景。

在 Web 开发中，实现“父窗控制子窗”的核心在于：window.open() 返回一个对新窗口的引用对象，该对象可直接访问其 document、location、postMessage 等属性和方法。只要两个窗口同源（协议、域名、端口一致），父窗口即可安全地操作子窗口 DOM。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

以下是一个简洁可靠的实现示例：

<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 地图屏
        <style>body { margin:0; padding:20px; font-family:sans-serif; text-align:center; }
      <body><h2>等待地图加载...</script>