同域下window.open打开页面调用子页面函数异常问题咨询

嘿，我来帮你搞定这个问题！你遇到的调用opened_foo.faa("hello")时出现异常的情况，在同域窗口通信场景里其实挺常见的，多半是下面这几个原因导致的，咱们一个个来解决：

1. 子页面还没加载完成就触发了函数调用 #

window.open打开foo.html后，页面需要一定时间加载渲染，如果你点击#dofaa按钮的时候，foo.html还没加载完，那opened_foo里的faa函数根本还没定义，自然会报错。

解决办法：

• 调用前先做存在性检查：

$('#dofaa').click(function() {
  // 确认窗口没关闭、且函数已存在
  if (opened_foo && !opened_foo.closed && typeof opened_foo.faa === 'function') {
    opened_foo.faa("hello");
  } else {
    alert('foo页面还没加载好或者已经关闭啦！');
  }
});

• 或者监听子页面的加载完成事件，等加载完再允许调用：

var opened_foo;
var isFooReady = false;

$('#openfoo').click(function() {
  opened_foo = window.open('foo.html','_blank');
  // 监听子页面加载完成
  opened_foo.onload = function() {
    isFooReady = true;
    console.log('foo页面加载完成，可以调用函数啦');
  };
});

$('#dofaa').click(function() {
  if (isFooReady && !opened_foo.closed) {
    opened_foo.faa("hello");
  }
});

2. faa函数没有挂载到全局window对象上 #

如果foo.html里的faa函数是在闭包或者模块作用域里定义的，外部窗口就访问不到它。比如这种写法：

// 这种闭包里的函数外部无法访问
(function() {
  function faa(msg) {
    console.log(msg);
  }
})();

解决办法：把faa显式挂载到window对象，让它变成全局可访问的函数：

window.faa = function(msg) {
  console.log('收到消息：', msg);
};

3. 浏览器弹窗拦截或窗口上下文被限制 #

虽然你是通过点击事件触发的window.open，但有些浏览器对弹窗的限制比较严格，比如如果点击事件里夹杂了异步操作（比如先请求接口再打开窗口），可能会被拦截，导致窗口上下文丢失。

排查方向：

• 检查浏览器是否拦截了foo.html的弹窗，允许弹窗后再测试
• 确保window.open是直接在用户点击事件的同步逻辑里触发的，不要放在异步回调里

先按上面的步骤排查，基本就能解决这个调用异常的问题啦！

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