页面跳转后修改网页样式代码不生效 问题原因排查

问题原因 #

• 代码执行顺序逻辑错误：window.location.href 赋值操作会立即触发浏览器卸载当前页面、加载目标跳转地址，这行代码之后的所有当前页面脚本都不会被执行，你绑定window.onload事件的代码写在重定向逻辑之后，根本没有运行的机会。
• 即便你把window.onload绑定逻辑挪到重定向代码之前，也无法触发回调：window.onload是当前页面所有DOM、样式、资源全部加载完成后才会触发的事件，你在页面加载过程中就触发了跳转，当前页面还没完成加载就已经被销毁，回调函数自然不会运行。

正确实现逻辑 #

如果你想要先修改当前页面内容、再触发跳转，需要把重定向逻辑放在页面修改操作的后面，示例代码如下：

window.onload = function() {
  // 先完成当前页面的修改操作
  document.getElementById('content').innerHTML = "Change the text"
  console.log("****")
  // 所有修改完成后再执行跳转，若需要让用户看到修改后的页面效果，可增加延时跳转
  // 例：延时2秒跳转：setTimeout(() => {window.location.href = "https://google.com"}, 2000)
  window.location.href = "https://google.com"
}

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