本文详解如何在不触发“Illegal invocation”或栈溢出错误的前提下，安全地重写 navigator.share() 方法，动态替换其 url 参数，适用于多子域 SEO 场景下的精准分享控制。
本文详解如何在不触发“illegal invocation”或栈溢出错误的前提下，安全地重写 `navigator.share()` 方法，动态替换其 `url` 参数，适用于多子域 seo 场景下的精准分享控制。
现代 Web 应用（尤其是基于 WordPress 子域名克隆架构的站点）常面临一个关键矛盾：SEO 要求克隆站点（如 clonea.abcwebsite.com）的 指向主站（www.abcwebsite.com）以避免重复内容惩罚；但用户通过浏览器原生分享按钮（如 Chrome/Edge/Safari 的“分享”菜单）调用 navigator.share() 时，该 API 默认优先读取 canonical URL —— 导致实际分享出去的是主站链接，而非当前访问的克隆站点地址，严重削弱克隆站点的流量转化与品牌露出。
直接删除 canonical meta 标签虽可让 navigator.share() 回退至 location.href（即真实克隆 URL），却会破坏 Google 的索引去重逻辑；而仅将 canonical 移至 HTTP 响应头，又无法被 Bing 等搜索引擎识别，造成大量克隆页意外进入搜索结果。因此，最稳健的方案是保留 canonical meta 标签（满足 SEO），同时拦截并重写 navigator.share() 的参数行为——核心在于：必须确保原生方法调用时的 this 上下文仍为 navigator 对象，否则将抛出 Failed to execute 'share' on 'Navigator': Illegal invocation。
以下为经过生产验证的安全覆盖方案：
// ✅ 正确：保存原生方法引用，并使用 .call() 显式绑定 this
if ('share' in navigator) {
const originalShare = navigator.share;
navigator.share = function(data) {
// 深拷贝防止污染原始对象（推荐，尤其当 data 来自第三方库）
const modifiedData = { ...data };
// 关键：动态注入当前克隆站点的真实 URL（非 canonical）
// 示例：克隆站点为 clonea.abcwebsite.com → 分享链接保持为该子域
modifiedData.url = window.location.origin + window.location.pathname + window.location.search;
// ✅ 安全调用：显式将 this 绑定为 navigator
return originalShare.call(navigator, modifiedData);
};
} else {
console.warn('Web Share API not supported in this browser.');
}
⚠️ 注意事项
- 禁止直接赋值 navigator.share = () => {...} 并内部调用 originalShare(data)：这会使 originalShare 的 this 指向 undefined（严格模式）或全局对象，而非 navigator，必然触发 Illegal invocation。
- 避免递归重入：不要在重写函数内再次调用 navigator.share(...)，否则会无限循环导致 Maximum call stack size exceeded。务必使用 .call(navigator, ...) 或 .apply(navigator, [...])。
- 兼容性兜底：务必检测 'share' in navigator，并在不支持的环境（如旧版 Safari、部分桌面浏览器）中提供降级方案（例如显示自定义分享弹窗或复制链接）。
- URL 构造建议：使用 window.location.origin + window.location.pathname + window.location.search 可精确还原当前页面 URL（不含 hash），比 location.href 更可控；若需排除 UTM 等追踪参数，可在此处做正则清洗。
- 性能与时机：该覆盖代码应尽早执行（如 中的 <script> 或模块入口），确保在任何第三方脚本调用 navigator.share 前已完成劫持。</script>
完成上述覆盖后，所有原生分享行为（包括用户点击浏览器菜单中的“分享”按钮）都将自动使用你指定的 URL，而 canonical meta 标签继续正常服务于搜索引擎爬虫——实现 SEO 合规性与用户体验的双重保障。此方案已在多个高流量 WordPress 子域名集群中稳定运行，是当前解决“克隆站分享 URL 错位”问题的最优实践。
