Chrome控制台中window.onload页面跳转后未执行指定函数求解决方案

嘿，这个问题我之前踩过坑！咱们先搞清楚为啥会这样：当你设置window.location的时候，浏览器会立刻开始卸载当前页面、加载新页面——这意味着当前页面的所有后续代码（包括你绑定的window.onload）根本没机会运行，因为当前页面的上下文直接被销毁了。

接下来给你两种可行的解决思路，看你具体需求来选：

一、如果要在跳转前执行函数 #

这种情况最简单，把跳转逻辑放到函数内部，确保函数执行完成后再触发跳转：

同步函数场景 #

function preStart() {
  console.log("Hello");
  // 函数执行完毕后再跳转
  window.location = 'https://www.google.com/';
}
// 直接调用函数
preStart();

异步函数场景（比如包含API请求、定时器等） #

如果你的preStart是异步操作，得确保异步任务完成后再跳转，可以用Promise或者async/await：

function preStart() {
  return new Promise((resolve) => {
    console.log("Hello");
    // 模拟异步操作，比如发送一个请求
    setTimeout(() => {
      console.log("异步任务完成");
      resolve();
    }, 1000);
  });
}

// 等待异步任务结束后跳转
preStart().then(() => {
  window.location = 'https://www.google.com/';
});

// 或者用async/await写法
// async function init() {
//   await preStart();
//   window.location = 'https://www.google.com/';
// }
// init();

二、如果要在跳转后的页面执行函数 #

这种情况需要你能控制目标页面的代码（如果是第三方页面比如Google，那你没法修改它的代码，这种方法就不适用）：

1. 跳转时通过URL参数传递标记：

// 带参数跳转
window.location = 'https://www.google.com/?runPreStart=1';

2. 在目标页面的代码中添加检测逻辑：

window.onload = function() {
  // 解析URL参数
  const params = new URLSearchParams(window.location.search);
  // 如果检测到标记，执行对应逻辑
  if (params.get('runPreStart') === '1') {
    console.log("Hello");
  }
};

总结一下：核心逻辑就是当前页面一旦开始跳转，就会被浏览器销毁，所有未执行的代码都终止了——所以要么在跳转前把要执行的代码跑完，要么把代码放到目标页面去执行。

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