如何针对新选项卡调用方法（父级告诉子窗口调用方法）？

Question

我正在努力理解我见过的例子，但我不明白。

这是我正在尝试做的事情：

1. 在新标签/窗口var win = window.open('index.htm', '_blank');
中打开当前页面
2. 在新窗口$('#tblTarget').DataTable().page.len(100).draw();
中调用DataTable上的方法
3. 使用侦听器等待新选项卡准备就绪，以调用上面指定的方法

我不明白如何将我的事件监听器附加到包含新窗口对象的变量。这是我尝试过的：

var win = window.open('index.htm', '_blank');
win.addEventListener('load', function() {
     console.log('THIS FIRES ON THE PARENT, NOT THE CHILD');
     $('#tblTarget').DataTable().page.len(100).draw();
});
win.focus();

我还尝试添加这样的事件监听器：  $(win.document).on('load', function(){...}，但这不起作用。

我还试图操纵win对象中的DOM，如下所示：$(win.document.body).find('#tblTarget thead').addClass('manipulate-something')，但这也不起作用。

如何调用方法，并在新选项卡中与DOM交互？

Answer 1

您可以在新窗口或标签页中使用开场白

在home.html

function fillData(){
    return "filled on parent";
}
window.open('index2.html', '_blank');

在index2.html上你可以用这种方式调用fillData：假设我们有一个id = demo的p元素。

$('#demo').html( this.opener.fillData( ) );

这将使新的选项卡/窗口调用父窗口上的函数。