如何通过父页面调用window.open打开的新窗口中的函数？

核心问题 #

你直接调用myWindow.doSomething()失败的原因是：新窗口的页面还没加载完成，doSomething函数还未定义，此时调用会抛出"函数未定义"的错误。必须等待新窗口加载完成后再执行函数，同时还要考虑同源策略的限制。

场景1：新窗口页面与主页面同域 #

这种情况下可以直接监听新窗口的load事件，等页面完全加载后调用目标函数：

HTML按钮 #

<button id="triggerBtn">打开窗口并执行操作</button>

JavaScript代码 #

document.getElementById('triggerBtn').addEventListener('click', function() {
  // 替换为你的实际参数
  const targetUrl = './your-target-page.html';
  const windowName = 'customWindow';
  const windowFeatures = 'width=800,height=600,top=100,left=100';

  const myWindow = window.open(targetUrl, windowName, windowFeatures);

  // 监听新窗口加载完成事件
  myWindow.addEventListener('load', function() {
    // 先检查函数是否存在，避免报错
    if (typeof myWindow.doSomething === 'function') {
      myWindow.doSomething();
    } else {
      console.error('目标窗口中未找到doSomething函数');
    }
  });
});

场景2：新窗口页面与主页面跨域 #

浏览器的同源策略会禁止直接访问跨域窗口的全局对象，此时需要用postMessage进行跨页面通信：

步骤1：在目标跨域页面中添加消息监听 #

// 目标页面的JavaScript代码
window.addEventListener('message', function(event) {
  // 验证消息来源，避免恶意调用（替换为你的主页面域名）
  if (event.origin !== 'https://your-main-domain.com') return;

  // 根据消息指令执行函数
  if (event.data === 'runDoSomething') {
    doSomething(); // 执行目标函数
  }
});

步骤2：主页面按钮触发逻辑 #

document.getElementById('triggerBtn').addEventListener('click', function() {
  const targetUrl = 'https://cross-domain-page.com';
  const windowName = 'crossDomainWindow';
  const windowFeatures = 'width=800,height=600';

  const myWindow = window.open(targetUrl, windowName, windowFeatures);

  myWindow.addEventListener('load', function() {
    // 发送消息触发目标函数，建议将*替换为目标域名提升安全性
    myWindow.postMessage('runDoSomething', '*');
  });
});

注意事项 #

• 确保window.open是在用户交互回调中执行（比如按钮点击事件），否则容易被浏览器的弹窗拦截机制阻止。
• 如果重复点击按钮打开同名窗口，建议先检查窗口是否已存在且未关闭：

  if (myWindow && !myWindow.closed) {
    myWindow.focus();
    // 可直接触发函数（如果窗口已加载完成）
    if (typeof myWindow.doSomething === 'function') {
      myWindow.doSomething();
    }
    return;
  }
  

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