判断当前页面是否为H5跳转而来需依赖发起方主动标识，因document.referrer不可靠；推荐用URL参数（如?from=h5）、sessionStorage（同源有效）或history.state（同域且不刷新）传递来源信息。
怎么判断当前页面是 H5 页面跳转来的
浏览器本身不提供“这是不是跳转来的”这种元信息，document.referrer 是唯一能间接推断的字段，但它不可靠——可能为空、被屏蔽、被伪造，或来自非页面跳转（比如书签、地址栏直输、HTTP 重定向）。
真正可控的方式，是跳转发起方主动带标识。常见做法有三种：
- 用
URL参数传递标记，比如?from=h5或?utm_source=mobile_web - 跳转前写入
sessionStorage（注意：跨域失效，且仅对同源跳转有效），例如在跳转前执行sessionStorage.setItem('jump_origin', 'h5') - 如果跳转是通过
window.location.href或location.assign()触发的，且同域，可在跳转前设history.state，目标页用history.state读取（但刷新后丢失）
为什么不能只看 document.referrer
document.referrer 值受浏览器策略和用户环境强影响：
- 从 HTTPS 页面跳到 HTTP 页面时，大多数现代浏览器会清空
referrer - 用户启用“禁止第三方 referrer”或使用隐私模式，
referrer可能为空字符串 - 从原生 App 内嵌 WebView 跳转，部分安卓 WebView 默认不传
referrer；iOS WKWebView 需手动配置navigationDelegate才能透出 -
referrer是纯字符串，无法区分“是扫码打开”还是“是从微信内置浏览器点击链接跳转”，更无法识别是否为 H5 页面内跳转（比如 Vue Router 的router.push()）
Vue/React 单页应用里怎么识别“页面跳转来源”
SPA 内部路由跳转（如 vue-router 的 push 或 react-router 的 navigate()）不会触发完整页面加载，document.referrer 不变，URL 参数也不一定存在。此时必须依赖路由元信息或状态透传：
立即学习“前端免费学习笔记（深入）”；
- 在
router.push()时带上state，例如：router.push({ path: '/detail', state: { from: 'h5-list' } })，目标组件用useRouter().state（Vue 3）或useLocation().state（React Router v6+）读取 - 避免把关键逻辑绑在“是否跳转”上，而是明确“谁跳的、为什么跳”——比如后端返回的卡片数据里带
jump_type: "h5_internal"，前端渲染时直接读字段 - 不要在
mounted/useEffect里反复检查referrer，它在 SPA 生命周期中几乎不变
容易忽略的关键点：H5 页面跳转 ≠ 移动端页面
“H5 页面”是业务概念，不是技术标准。一个页面是否属于 H5，取决于它是否运行在微信、支付宝、App WebView 等容器中，而不是靠 UA 或 document.documentElement.clientWidth 判断。
真正需要区分的，往往是“是否在特定容器中被打开”，这时该用容器提供的 JSBridge 检测：
- 微信：检查
typeof WeixinJSBridge !== 'undefined'或/(MicroMessenger|miniProgram)/.test(navigator.userAgent) - 支付宝：检查
AlipayJSBridge是否存在，或navigator.userAgent.includes('AlipayClient') - 但注意：这些只是“运行环境”，不代表“是否跳转而来”——你得把环境判断 + 跳转标识（比如 URL 参数）组合使用，才能闭环
最稳妥的做法，永远是跳转发起方负责声明意图，而不是接收方费力猜测。
