javascript - 如何针对新选项卡调用方法(父窗口告诉子窗口调用方法)？

Question

我非常努力地尝试理解我所看到的示例，但我不明白。

这就是我正在尝试做的事情:

1. 在新标签/窗口中打开当前页面 var win = window.open('index.htm', '_blank');
2. 在新窗口中调用 DataTable 的方法 $('#tblTarget').DataTable().page.len(100).draw();
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( ) );

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