如何从父页面控制window.open()打开的子窗口内容？

核心是保存子窗口的引用，通过这个引用直接操作子窗口的DOM元素，避免重复打开新窗口。以下是具体实现步骤：

1. 打开子窗口并保存引用 #

在父页面（DM窗口）中，用变量存储window.open()的返回值，同时给子窗口指定唯一名称（第二个参数），这样重复调用时会复用已打开的窗口，而不是新建：

// 全局变量存储子窗口引用
let mapWindow;

// 初始化打开校准图窗口
function openMapScreen() {
  // 第二个参数'MapScreen'是窗口名称，确保复用
  mapWindow = window.open('map-screen.html', 'MapScreen', 'width=1920,height=1080');
  // 等待子窗口加载完成后初始化校准图
  mapWindow.onload = function() {
    mapWindow.document.getElementById('mainMap').src = 'calibration-image.jpg';
  };
}

2. 子窗口（地图屏幕）的HTML结构 #

创建map-screen.html，只需要一个用于显示地图的img标签，设置唯一ID方便父页面定位：

<!DOCTYPE html>
<html>
<head>
  <title>DM Map Screen</title>
  <style>
    body { margin: 0; }
    #mainMap { width: 100vw; height: 100vh; object-fit: contain; }
  </style>
</head>
<body>
  <img id="mainMap" src="" alt="Map Display">
</body>
</html>

3. 父页面图库切换逻辑 #

在父页面的图库项（按钮/缩略图）上绑定点击事件，通过保存的子窗口引用直接修改img的src属性：

// 切换子窗口地图的函数
function switchMap(imgSrc) {
  // 先检查子窗口是否存在且未关闭
  if (mapWindow && !mapWindow.closed) {
    mapWindow.document.getElementById('mainMap').src = imgSrc;
  } else {
    // 窗口已关闭则重新打开
    openMapScreen();
    // 延迟确保窗口加载完成后设置图片
    setTimeout(() => {
      mapWindow.document.getElementById('mainMap').src = imgSrc;
    }, 500);
  }
}

// 给图库项绑定点击事件（示例）
document.querySelectorAll('.gallery-item').forEach(item => {
  item.addEventListener('click', function() {
    const mapSrc = this.dataset.mapSrc; // 假设图库项通过data属性存图片路径
    switchMap(mapSrc);
  });
});

关键注意事项 #

• 同源策略：父页面和子页面必须在同一域名、端口下运行（比如本地http://localhost:8000），否则浏览器会阻止跨DOM操作。
• 窗口状态检查：每次操作前判断mapWindow是否存在且未关闭，避免报错。
• 加载时机：通过子窗口的onload事件确保DOM加载完成后再操作，防止找不到元素。

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