Chrome控制台中window.location跳转后window.onload不执行函数的解决方法咨询

嘿，作为JavaScript新手碰到这个问题太正常啦，我来给你掰扯清楚为啥会这样，还有怎么解决～

为啥你的代码没生效？ #

当你执行window.location = 'https://www.google.com/';时，浏览器会立刻开始加载新的页面，当前页面的所有后续代码（包括window.onload = preStart;这行）其实根本没机会在当前页面发挥作用。而且更关键的是，新页面会创建一个完全独立的JavaScript执行上下文，原来页面里定义的函数和事件绑定，完全带不到新页面里去，所以preStart自然不会执行。

分情况给你解决方案 #

根据你的需求不同，有两种常见的解决思路：

情况1：你想在跳转后的新页面执行preStart函数

• 如果新页面是你自己能修改的网站（比如你自己的项目页面）：
  直接把preStart函数的定义和window.onload绑定，写在新页面的JavaScript代码里就行，比如在新页面的脚本里加：

  function preStart() {
    console.log("Hello");
  }
  window.onload = preStart;
  

• 如果新页面是第三方网站（比如谷歌这种你没法修改代码的）：
  这种情况得借助浏览器扩展来实现。你可以写一个简单的浏览器扩展，用内容脚本的方式把preStart函数注入到目标页面中，然后绑定它的window.onload事件。这是因为浏览器的同源策略限制，直接在当前页面的控制台里没法跨页面执行代码。

情况2：你其实是想刷新当前页面后执行函数（不是跳转到完全不同的网站）

那可以用URL参数做个标记，避免无限循环，代码示例如下：

function preStart() {
  console.log("Hello");
}

// 检查URL里是否带有我们的标记参数
if (!window.location.search.includes('afterReload')) {
  // 添加标记后刷新当前页面
  window.location = `${window.location.href}?afterReload=1`;
} else {
  // 已经是刷新后的页面，执行目标函数
  preStart();
}

关键知识点总结 #

记住：当你通过window.location跳转到新页面时，原页面的所有JavaScript环境都会被浏览器销毁，任何绑定在原页面的事件、定义的函数，都不会影响到新页面。新页面的代码是完全独立运行的，这是浏览器的安全机制和运行逻辑决定的。

内容的提问来源于stack exchange，提问作者M.P.Tree