window.open()阻止后续函数执行问题求助

我写了一个异步函数ControlNavigationLinks，原本想先通过window.open("main.html", "_self")跳转到新页面，再执行搜索栏阻止刷新、收集搜索内容、调用API渲染页面的操作。但实际情况是，window.open("_self")会直接刷新页面，导致函数后续代码完全无法执行；移除该语句后渲染逻辑能正常运行，但我需要实现跳转页面后再渲染搜索结果的需求。试过在跳转后加window.preventDefault()，但这会直接阻止跳转生效。

原代码如下：

const ControlNavigationLinks = async function () {
  try {
    //  1) Redirect users to the pain page
    window.open("main.html", "_self"); // 页面刷新，后续代码无法执行

    // 2) 阻止搜索栏刷新页面
    event.preventDefault();

    // 3) 如果点击的是Logo，直接返回
    const element = event.target;
    if (element.classList.contains("logo")) return;

    // 4) 收集搜索的国家信息
    const form = document.querySelector(".search-bar-section");
    const search = form.elements["search"].value;
    if (search === null || "") return;

    model.state.search = await search;

    // 5) 清空DOM
    document.querySelector(".container-search").innerHTML = "";

    // 6) 从外部API获取国家信息
    const _ = await model.setSearchResults();

    // 7) 调用函数触发页面渲染
    ControlRenderSearchResults();
  } catch (e) {
    console.error(e.message);
  }
};

尝试过的无效代码：

//  1) 跳转到目标页面
window.open("main.html", "_self"); // 页面刷新，后续代码无法执行
window.preventDefault(); // 直接阻止了跳转生效

问题根源 #

window.open("main.html", "_self")本质是替换当前页面，浏览器会立即卸载当前页面的所有JS上下文，所以后续代码根本没有执行的机会。而event.preventDefault()如果放在跳转前调用，会阻止默认的导航行为（包括手动触发的window.open），导致跳转失效；放在跳转后调用则完全没用，因为页面已经开始刷新了。

解决方案 #

核心思路是先收集搜索数据，再携带数据跳转到新页面，最后在新页面加载时读取数据并执行渲染逻辑，具体步骤如下：

1. 修改原函数，先处理事件阻止、收集搜索参数，再通过URL查询参数携带搜索值跳转到main.html。
2. 在main.html中添加页面加载逻辑，读取URL中的搜索参数，执行原函数里的渲染步骤。

1. 原页面的ControlNavigationLinks函数修改

const ControlNavigationLinks = function (event) {
  try {
    // 先阻止默认事件，避免页面自动刷新
    event.preventDefault();

    // 如果点击的是Logo，直接返回
    const element = event.target;
    if (element.classList.contains("logo")) return;

    // 收集搜索的国家信息
    const form = document.querySelector(".search-bar-section");
    const search = form.elements["search"].value.trim();
    if (!search) return; // 空值直接返回

    // 携带搜索参数跳转到main.html（编码特殊字符避免问题）
    window.location.href = `main.html?search=${encodeURIComponent(search)}`;
  } catch (e) {
    console.error(e.message);
  }
};

2. 在main.html中添加页面加载时的处理逻辑

// main.html中的脚本
document.addEventListener("DOMContentLoaded", async function () {
  // 从URL查询参数中获取搜索值
  const urlParams = new URLSearchParams(window.location.search);
  const search = urlParams.get("search");

  if (!search) return;

  try {
    // 执行原函数中的渲染逻辑
    model.state.search = search;

    // 清空DOM
    document.querySelector(".container-search").innerHTML = "";

    // 从外部API获取国家信息
    await model.setSearchResults();

    // 触发页面渲染
    ControlRenderSearchResults();
  } catch (e) {
    console.error(e.message);
  }
});

逻辑说明 #

• 原函数不再需要异步标记（跳转无需等待），先阻止默认事件，收集到有效搜索值后，通过window.location.href跳转并携带编码后的搜索参数（避免特殊字符导致的URL解析问题）。
• main.html在页面加载完成后，读取URL中的搜索参数，然后执行原本放在跳转后的渲染逻辑，完美实现跳转页面后再渲染搜索结果的需求。

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