Google Apps Script同页面不同参数重定向出现空白页问题

核心问题分析 #

首次跳转正常、后续同类跳转空白的原因主要有两点：

1. URL参数拼接错误：原getUrl函数直接将新参数拼接到服务URL后，若当前URL已有参数，会生成格式非法的URL（如...?tag=a?tag=b），导致doGet无法正确解析参数，返回空白页。
2. 异步请求时序冲突：通过google.script.run获取URL的异步操作，在iframe环境下可能与页面跳转的加载逻辑冲突，导致页面无法正常渲染。

解决方案1：前端直接构造跳转URL（推荐） #

无需依赖后端接口，前端直接拼接合法目标URL，避免异步请求的潜在问题：

修改HTML中的redirect函数：

function redirect(newTag) {
  // 获取当前页面的基础URL（剔除现有参数）
  const baseUrl = `${window.location.origin}${window.location.pathname}`;
  // 拼接新参数，用encodeURIComponent处理特殊字符
  const newUrl = `${baseUrl}?tag=${encodeURIComponent(newTag)}`;
  // 使用replace跳转，避免历史栈积累重复记录
  window.location.replace(newUrl);
}

解决方案2：修复后端参数拼接逻辑 #

如果必须保留后端获取URL的逻辑，需修正参数拼接错误，并修复前端语法问题：

1. 修改Code.gs中的getUrl函数：

function getUrl(newParam) {
  const currentUrl = ScriptApp.getService().getUrl();
  // 根据当前URL是否已有参数，选择用?或&拼接新参数
  return currentUrl.includes('?') 
    ? `${currentUrl}&${newParam}` 
    : `${currentUrl}?${newParam}`;
}

2. 修改HTML中的redirect函数（去掉无效的,true语法，调整参数格式）：

function redirect(newTag) {
  const newParam = `tag=${encodeURIComponent(newTag)}`;
  google.script.run.withSuccessHandler(targetUrl => {
    window.location.replace(targetUrl);
  }).getUrl(newParam);
}

解决方案3：兜底强制刷新（针对iframe加载异常） #

若上述方案仍无效，可在跳转后检查页面状态，强制刷新空白页：

function redirect(newTag) {
  const baseUrl = `${window.location.origin}${window.location.pathname}`;
  const newUrl = `${baseUrl}?tag=${encodeURIComponent(newTag)}`;
  window.location.href = newUrl;
  
  // 延迟1秒检查页面是否空白，是则强制刷新
  setTimeout(() => {
    if (!document.body.textContent.trim()) {
      window.location.reload(true);
    }
  }, 1000);
}

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