JS中window.onload失效，如何在新打开页面加载完成后运行代码？

问题根因 #

1. 事件绑定对象错误：你代码中写的window.onload绑定的是当前运行脚本的父窗口的加载事件，不是window.open新开的登录窗口的，当前窗口早已加载完成，所以回调函数永远不会触发。
2. 跨域权限限制：如果你是在非stackoverflow.com域名下运行脚本，浏览器同源策略会禁止你操作跨域窗口的DOM，即便拿到新窗口引用也无法修改内部元素。

解决方案 #

场景1：在stackoverflow域名下运行脚本 #

先打开任意stackoverflow页面，再打开控制台运行以下代码即可：

console.log("starting")
// 保存新打开窗口的引用
const loginWindow = window.open("https://stackoverflow.com/users/login");
console.log("page open")
// 给新窗口绑定加载事件，操作新窗口的DOM
loginWindow.addEventListener('DOMContentLoaded', function() {
    console.log("page loaded")
    loginWindow.document.getElementById('email').value = "ThisIsMy@Email.com";
    loginWindow.document.getElementById('password').value = "ThisIsMyPassword";
    loginWindow.document.getElementById('submit-button').click();
    console.log("signed in")
})

注意：如果浏览器拦截了弹窗，需要先允许当前站点的弹窗权限，否则loginWindow会返回null导致代码运行失败。

场景2：需要在其他域名下运行脚本 #

浏览器同源策略是默认的安全限制，普通前端脚本无法绕过，你可以改用浏览器扩展实现该功能，扩展可以主动申请跨域操作权限，即可实现不同域名下的页面DOM操作。

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