如何实现父窗口触发新标签页子窗口调用方法？及相关困惑

我完全懂你的困惑——要等新标签页彻底加载好再执行DataTable的方法，核心就是给新窗口对象绑定正确的加载事件监听器。下面是具体的实现方案和细节说明：

完整可运行代码示例 #

// 1. 打开新标签页并保存窗口对象
var win = window.open('index.htm', '_blank');

// 2. 绑定load事件监听器，等待新页面完全就绪
win.addEventListener('load', function() {
    // 3. 在新窗口的上下文里调用DataTable方法
    win.$('#tblTarget').DataTable().page.len(100).draw();
});

关键细节拆解 #

• 事件绑定逻辑：window.open返回的窗口对象可以直接用addEventListener绑定load事件，这个事件会在新窗口的所有资源（包括DOM元素、DataTable脚本）都加载完成后触发，刚好匹配你需要等待页面就绪的需求。
• 跨上下文访问：必须通过win.$或者win.document来访问新窗口的DOM环境，不能直接用当前页面的$——否则会在当前页面的DOM里找元素，肯定找不到目标表格。
• 同源策略限制：如果新窗口打开的页面和当前页面不同域，浏览器的同源策略会阻止你访问新窗口的DOM和方法，这种情况得换用postMessage这类跨域通信方式来实现。

另外，如果你想在DOM解析完成后就执行（不用等图片等资源加载），可以换成DOMContentLoaded事件，但要确保DataTable脚本已经在DOM解析前加载完成：

win.addEventListener('DOMContentLoaded', function() {
    win.$('#tblTarget').DataTable().page.len(100).draw();
});

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