如何为站点URL添加?app=1参数并在页面跳转时保留该参数

安全阿岳

2026-8-29

实现方案

分通用原生方案和框架适配方案两部分，覆盖绝大多数站点场景：

第一步先做入口状态兜底：用户首次带?app=1进入站点时，立刻把app模式的标记存在sessionStorage里，不要全程只靠URL传参，避免某一步跳转漏加参数后状态彻底丢失。sessionStorage是标签页级存储，关标签页自动清空，不会串到用户其他普通访问的标签页，比localStorage适配性更好。

全局拦截所有原生链接跳转：给document绑定捕获阶段的click事件，所有点击行为先触发这个拦截逻辑，判断点击目标如果是站内<a>标签，就给链接统一补上?app=1参数（原链接已带其他query参数时自动拼&app=1，已存在app参数就跳过不重复加），再执行默认跳转。
参考实现代码：

(function initAppParamKeep() {
  // 初始化app模式标记
  const initParams = new URLSearchParams(window.location.search);
  if (initParams.get('app') === '1') {
    sessionStorage.setItem('siteAppMode', '1');
  }
  // 兜底：如果是app模式但当前URL丢了参数，无刷新补上
  if (sessionStorage.getItem('siteAppMode') === '1' && initParams.get('app') !== '1') {
    const currentUrl = new URL(window.location.href);
    currentUrl.searchParams.set('app', '1');
    window.history.replaceState(null, '', currentUrl.toString());
  }
  // 拦截a标签点击
  document.addEventListener('click', function(e) {
    const targetLink = e.target.closest('a');
    if (!targetLink) return;
    // 跳过非http协议、外站链接
    if (targetLink.href.startsWith('javascript:') || targetLink.href.startsWith('mailto:')) return;
    const linkUrl = new URL(targetLink.href, window.location.origin);
    if (linkUrl.origin !== window.location.origin) return;
    // 非app模式不处理
    if (sessionStorage.getItem('siteAppMode') !== '1') return;
    // 已经带参数就跳过
    if (linkUrl.searchParams.get('app') === '1') return;
    // 补参数
    linkUrl.searchParams.set('app', '1');
    targetLink.href = linkUrl.toString();
  }, true); // 捕获阶段绑定，优先级高于元素自身的点击事件
})()

单页应用(SPA)额外适配：如果站点是Vue/React等框架做的前端路由跳转，不会触发原生页面刷新，上面的a标签拦截覆盖不到路由API触发的跳转，需要加路由层拦截：
- Vue项目：在vue-router的全局前置守卫beforeEach中判断，处于app模式时给目标路由的query追加app: '1'再放行，注意判断避免重复追加。
- React项目：要么统一封装路由跳转方法，所有调用跳转的地方都走封装方法补参数；要么重写history.pushState、history.replaceState方法，在这两个方法触发时统一给目标地址补app参数，同时监听popstate事件处理浏览器前进后退的场景。
特殊场景补漏：如果站点有GET方式提交的表单，要给form绑定submit事件拦截，提交前给action地址或者表单参数补上app=1；如果有JS直接调用window.location.href/window.open跳站内地址的逻辑，最好统一封装跳转方法，不要零散写跳转逻辑，避免漏加参数。

需学习查阅的相关内容

Web基础API部分：URLSearchParams的完整用法，用来安全处理URL查询参数，避免手写字符串拼接出现多问号、多连接符的问题；DOM事件流的捕获、冒泡机制，理解为什么要在捕获阶段绑定事件才能优先拦截到跳转行为；History API的pushState、replaceState方法，掌握无刷新修改URL的逻辑；sessionStorage的生命周期、作用域规则，正确做状态兜底。
框架相关部分：项目所用前端框架对应的路由拦截/路由守卫官方文档，不同版本的路由API写法有差异，以实际项目使用的版本规则为准。
基础规则部分：同源判断逻辑，准确区分站内、站外链接，避免给外站链接追加自定义参数；URL结构组成规则，清楚path、query、hash部分的区别，处理hash路由站点时不会把参数加错位置。

测试注意点：要覆盖所有跳转场景做验证，包括普通链接点击、前端路由切换、表单提交、分页/筛选触发的跳转、浏览器前进后退、新开标签页跳转，确认不会出现参数丢失、参数重复追加的问题。

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