你已处于离线状态,显示的是缓存的页面内容

为博客做了外联新建标签页跳转和/mailto/自动跳转邮件客户端

时间:2026-05-24   标签: web, blog

早上起来为博客新增了两个功能

外联新建标签页跳转

这个在我的博客的实现有两种方法

直接硬编码

顶栏,底部footer,友链/link/等等

这些地方的外联一般加了就会很久不改,就直接硬编码使用新标签页打开

例如

<!-- 这里是底部 footer -->
<div
  class="footer border-top border-gray-light mt-5 pt-3 text-gray"
  style="display:flex; justify-content:space-around; align-items:center;"
>
  <div>
    <a href="https://mikufans.qzz.io" target="_blank" rel="noopener noreferrer"
      >VICP-T6JGPJNE</a
    >
  </div>
  <div>© 2025 - 2026 lm-xiao-fen</div>
  <div>
    文章内容遵循
    <a
      href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
      target="_blank"
      rel="noopener noreferrer"
      >CC BY-NC-SA 4.0</a
    >
    协议,源码遵循
    <a
      href="https://opensource.org/licenses/MIT"
      target="_blank"
      rel="noopener noreferrer"
      >MIT</a
    >
    协议
  </div>
  <div>
    <a
      href="https://github.com/xfcnl/xfcnl.github.io"
      target="_blank"
      rel="noopener noreferrer"
      >源码</a
    >
    在GitHub开源
  </div>
  <div><a href="feed.xml">RSS</a>&emsp;<a href="sitemap.xml">网站地图</a></div>
</div>

就直接加上 target=”_blank” rel=”noopener noreferrer” 即可

但我写博客是用 markdown ,我总不可能写 markdown 时写个

<a href="url" target="_blank" rel="noopener noreferrer">text</a>

那也太麻烦了,于是

js 脚本自动添加

<script>
      document.addEventListener('DOMContentLoaded', function () {
        const toggle = document.getElementById('navToggle');
        const links = document.getElementById('navLinks');
        if (toggle && links) {
          toggle.addEventListener('click', function () {
            this.classList.toggle('active');
            links.classList.toggle('open');
          });
        }
      });
</script>

当检测到时外联就自动加上target=”_blank” rel=”noopener noreferrer”

/mailto/自动跳转邮件客户端

这个就是通过一个隐藏的 <iframe> 元素触发 mailto: 协议,从而在后台静默调起系统默认的邮件客户端

<script>
 (function () {
   var iframe = document.createElement("iframe");
   iframe.style.display = "none";
   iframe.src = "mailto:G114514g@yeah.net"; //在这里配置收件人邮件地址
   document.body.appendChild(iframe);


   setTimeout(function () {
      iframe.parentNode && iframe.parentNode.removeChild(iframe);
   }, 3000);
 })();
</script>

这个还是蛮简单的,但有些浏览器可能会拦截,建议在页面上添加一个手动唤醒邮件客户端的按钮

可以在 /mailto/ 体验一下

注:Windows 默认邮件客户端可能时 edge ,如果失败的话可以在设置搜索 默认应用 检查一下是不是你常用的邮件客户端


相关文章

社交的

bilibiliemailYouTube