如何自定义原生navigator.share()函数以修改分享URL？

先看你之前代码的错误原因 #

• 第一种代码触发Maximum call stack size exceeded：你把defaultNavigator指向了navigator，重写后的navigator.share调用shareThis，而shareThis又调用defaultNavigator.share——也就是已经被重写的navigator.share，形成无限循环，最终栈溢出。
• 第二种代码触发Failed to execute 'share' on 'Navigator': Illegal invocation：浏览器原生API方法（比如navigator.share）必须绑定navigator作为上下文才能正常运行。你直接保存navigator.share的引用后调用，this指向已经不是navigator，不符合API的调用要求。

正确实现方案 #

我们要做的是：保存带正确上下文的原始分享方法，重写时强制替换分享URL为当前子站地址，同时保留页面的主站canonical标签。

// 保存绑定好上下文的原始share方法
const originalShare = navigator.share.bind(navigator);

// 重写navigator.share
navigator.share = function(options = {}) {
  // 强制将分享URL替换为当前子站的地址
  const customShareOptions = {
    ...options,
    url: window.location.href
  };
  // 调用原始方法完成分享
  return originalShare(customShareOptions);
};

代码说明 #

1. 绑定上下文：用bind(navigator)让原始的share方法始终以navigator作为运行上下文，避免非法调用错误。
2. 强制替换URL：不管用户调用时传不传url参数，都自动替换成当前子站的location.href，保证分享的是子站链接。
3. 保留其他参数：用扩展运算符保留用户传入的title、text等其他分享内容，不影响原有逻辑。

使用示例 #

触发分享时直接调用即可，无需手动指定URL：

navigator.share({
  title: document.title,
  text: "自定义的分享描述文本"
})
.then(() => console.log("分享成功"))
.catch(err => console.log("分享取消或失败:", err));

额外说明 #

这个方案既保留了指向主站的canonical元标签（满足Bing和Google的SEO索引要求），又能让移动端分享时自动使用子站URL，完美匹配你的需求。

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