如何将window.location.href逻辑改造为可直接使用的HTML HREF链接

因为静态a标签的href属性无法动态读取当前页面的标题、完整URL这类运行时信息，没法直接把动态值提前写死在href里，我们可以在保留原有功能逻辑的基础上，把触发载体从按钮替换成标准a标签，完全匹配你要的链接使用形式。

直接可用的精简写法 #

不需要额外定义独立的全局函数，直接把原有跳转逻辑内联在a标签的点击事件里即可：

<a href="#nojump" onclick="window.location.href = 'mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent(document.location.href); return false;">Email page</a>

写法优化说明 #

• 相比你原来的代码，这里给所有拼接到mailto参数里的动态值都加了encodeURIComponent编码，避免页面标题、URL里带&、中文、特殊符号时打乱mailto的参数结构，唤起邮件的兼容性更好
• 给a标签填了占位href#nojump，避免部分浏览器把无href的a标签识别为不可点击的纯文本；最后加的return false是为了阻止a标签默认的跳转到页顶行为
• 如果需要和你参考的普通链接写法一样带target="_top"属性，直接加上即可，不影响功能：

  <a href="#nojump" target="_top" onclick="window.location.href = 'mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent(document.location.href); return false;">Email page</a>
  

无内联JS的进阶写法 #

如果不想把JS逻辑写在标签属性里，可以把逻辑抽到外部脚本里，给a标签加个自定义标识类名即可：

1. 先写好符合语义的a标签：

   <a href="#email-share" class="email-page-share" target="_top">Email page</a>
   

2. 配套绑定事件的JS代码：

   document.querySelector('a.email-page-share').addEventListener('click', (e) => {
     // 阻止a标签默认跳转行为
     e.preventDefault();
     // 拼接mailto链接唤起邮件
     window.location.href = `mailto:?subject=${encodeURIComponent(document.title)}&body=${encodeURIComponent(document.location.href)}`
   })
   

注意：不存在完全不依赖JS的纯静态实现方式，因为当前页面的URL、标题都是随用户访问路径动态变化的，静态写死的href内容无法自动适配所有页面场景。

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