如何在页面跳转并完成加载后执行指定函数？

嘿，我来帮你捋捋问题出在哪，再给你适配测试环境的解决方案～

首先你得明白：你现在用的navigate事件，是在原页面开始跳转的瞬间就触发的，而且这段代码完全是在原页面的环境里跑的，根本没跑到新页面上去！这就是为什么你感觉newFunction在新页面加载前就执行了——它本来就不是在新页面里运行的呀😅

而且你说测试环境没法改目标页面的代码，那咱们得换个思路，利用你已经在做的Cookie来做文章，具体方案如下：

最优解决方案：Cookie标记 + 监听新页面加载完成 #

因为你在跳转前已经在setAndNavigate里设置了Cookie，那咱们可以加个「跳转标记Cookie」，然后在全局脚本里监听新页面的加载完成事件，检测到这个标记就执行目标函数：

步骤1：修改原跳转函数，添加标记Cookie #

在你原来的setAndNavigate里，除了已有的Cookie操作，再加一行标记Cookie的代码：

function setAndNavigate(event){
    event.preventDefault()

    // 原来的设置Cookie代码
    // ...

    // 新增：添加跳转标记Cookie，用来告诉新页面要执行函数
    document.cookie = "triggerNewFunction=1; path=/";

    // 跳转到新页面
    window.location.href = "http://newurl.com";
}

步骤2：全局添加页面加载监听（测试环境全局脚本） #

在你的测试环境全局脚本里（也就是能在所有页面加载时运行的脚本），加上这段代码：

// 监听页面所有资源加载完成（包括图片、样式，UI完全就绪）
window.addEventListener('load', function() {
    // 检查是否有咱们设置的跳转标记Cookie
    if (document.cookie.includes('triggerNewFunction=1')) {
        // 执行你的目标函数
        newFunction();
        // 执行完就清除Cookie，避免下次刷新新页面时重复执行
        document.cookie = "triggerNewFunction=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    }
});

// 你的目标函数
function newFunction(){
    // 这里写你要执行的代码
    console.log("新页面加载完成啦，我终于执行了！");
}

如果你的需求是只要DOM树构建完成（UI基本就绪，不用等图片等资源），可以把load事件换成DOMContentLoaded，触发时机更早但UI已经可用。

为什么你原来的写法不行？ #

再给你补个小知识点：

• navigation.navigate事件是在导航开始阶段触发的，此时新页面还没开始加载，代码完全在原页面上下文运行
• 当你用window.location.href跳转后，原页面的所有脚本环境都会被销毁，所以原页面里的任何后续代码都管不到新页面的加载过程

这样调整后，就能确保newFunction只在从指定跳转过来的新页面完全加载后执行啦～

备注：内容来源于stack exchange，提问作者Kieran M