页面加载到新标签后调用函数答案

【问题标题】：Call function after page was loaded in new tab页面加载到新标签后调用函数
【发布时间】：2015-01-08 07:57:05
【问题描述】：

单击按钮后，我需要在新选项卡中打开一些链接，并且在加载页面之后，我需要以编程方式在此页面上执行一些操作（例如单击适当的 GUI 元素等）。

例如，此代码应在新标签http://stackoverflow.com 中打开，然后单击“标签”：

<button type=\"button\"
    onclick="window.open('http://stackoverflow.com', '_blank');
    document.getElementById('nav-tags').click();">Click Me!
</button>

但是函数document.getElementById('nav-tags').click() 没有调用。

【问题讨论】：

没有办法这样做（出于安全原因），但你可以做的是加载 stackoverflow.com/tags
这只是 stackoverflow.com 的示例。 SPA（单页应用）网站的这些需求
如果 SPA 是用 Angular 做的，你仍然可以直接打开 url。执行此操作的其他方法是：使用 cookie 在选项卡或本地存储之间存储/加载信息。但它们必须在同一个域/具有相同的父级。
Call a JavaScript function across browser tabs的可能重复

标签： javascript html

【解决方案1】：

正如我在评论中所说，选项卡/窗口之间无法直接通信。

但是有办法解决这个问题：

打开另一个选项卡时，在 url 中发送您需要的数据（就像我在 cmets stackoveflow.com/tags 中建议的那样）
使用 cookie 进行通信 (https://stackoverflow.com/a/4079423/3600886)
使用本地存储进行通信 (http://dev.w3.org/html5/webstorage/) - 有一个库：https://github.com/diy/intercom.js/

如果您的用途只是在页面加载时显示一些数据，我会说使用第一个选项，它将适用于所有浏览器，没有任何其他限制。

使用其他选项，您需要页面位于同一域或具有相同的父窗口，而且旧版浏览器不支持本地存储。

【讨论】：

【解决方案2】：

从 JavaScript 创建选项卡，您可以使用 JavaScript 访问选项卡并放置一个 onload 函数

var w = window.open();
w.onload = function(){

};

你也可以把onload函数放在tab里：

window.onload = function(){
}

【讨论】：

试图用一个简单的console.log作为函数来做这个，但是没有用。该消息未记录在任何一个网站上。我在函数中使用了带有 console.log() 的第一个示例。

【解决方案3】：

你需要在 .ready 事件中编写你的 JS。所以它会在整个页面 DOM 准备好时被调用：

$(document).ready(function () {
      document.getElementById('nav-tags').click();
});

【讨论】：