javascript - 在 JS 中加载网页后如何运行代码（window.onload 失败了）？

Question

嘿嘿，

我正在尝试创建一个打开 URL 并使用给定凭据登录的脚本。

因此我创建了这个：

window.open("https://stackoverflow.com/users/login");
document.getElementById('email').value = "[e-mail]";
document.getElementById('password').value = "ThisIsMyPassword";
document.getElementById('submit-button').click();

但是后来我更改了代码以等待页面加载使用window.onload：

window.open("https://stackoverflow.com/users/login");
window.onload = function() {
    document.getElementById('email').value = "[e-mail]";
    document.getElementById('password').value = "ThisIsMyPassword";
    document.getElementById('submit-button').click();
}

但是，这似乎不起作用。

因此，我console.log在代码中添加了一些进行调试，如下所示：

console.log("starting")
window.open("https://stackoverflow.com/users/login");
console.log("page open")
window.onload = function() {
    console.log("page loaded")
    document.getElementById('email').value = "[e-mail]";
    document.getElementById('password').value = "ThisIsMyPassword";
    document.getElementById('submit-button').click();
    console.log("signed in")
}

当我在控制台（Chrome/Firefox）中运行代码时，我返回startedand page open，但没有别的。当我测试隔离的功能（即 3 个不同的document.getElementById）时，它工作得很好。通话一定有问题window.onload？

从 StackOverflow 上的其他来源，我尝试document.onload改用，我也尝试使用document.addEventListener('DOMContentLoaded', function() {...}，但这些似乎都不起作用。

有没有人有什么建议？

#新手

标签： javascripthtml

Answer 1

您根本无法访问跨源页面。您正在尝试的内容仅适用于浏览器插件。插件还需要用户授予的特定权限。例如修改 webRequest 的 chrome 权限：https ://developer.chrome.com/docs/extensions/reference/webRequest/

window.open()about:blank返回子窗口，如果它是或者如果应用了同源规则（协议、主机名和端口 - 见下图），则可以访问它。看看这个小提琴它显示的东西类似于你正在尝试的东西。(CORS 1)

在这里您可以看到您可以访问哪些子窗口。这意味着即时修改它或完全覆盖它的内容/位置。

在两个页面之间进行通信的唯一方法是：window.postMessage()并且window: Message-Event提供了一个易于使用的 API 进行通信。