首页 > 文章 > 前端

如何将 data-url 动态注入 href 实现中键点击新标签页打开

时间：2026-05-05 09:54:54 434浏览收藏

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《如何将 data-url 动态注入 href 实现中键点击新标签页打开》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

本文介绍一种基于 Tampermonkey 的轻量级解决方案，通过 JavaScript 自动提取标签中的 data-url 值并写入 href 属性，使原本禁用中键点击的链接恢复「Ctrl+左键」或鼠标中键在新标签页打开的功能。

本文介绍一种基于 Tampermonkey 的轻量级解决方案，通过 JavaScript 自动提取 `` 标签中的 `data-url` 值并写入 `href` 属性，使原本禁用中键点击的链接恢复「Ctrl+左键」或鼠标中键在新标签页打开的功能。

在许多教育平台（如 K12 Learning、D2L Brightspace）中，开发者为实现前端路由或跳转控制，常将标签的 href 设为 "#"，再通过 data-url 存储真实目标地址。这种写法虽便于 JS 控制跳转逻辑，却导致浏览器原生行为失效——用户无法使用中键点击、右键“在新标签页中打开”或按住 Ctrl/Cmd 后左键点击等快捷操作。

解决思路很直接：将 data-url 中的真实 URL 解析后，动态写入 href 属性，同时保留原有语义与可访问性（如 aria-label、title 等不受影响）。以下是一个稳定、可复用的 Tampermonkey 用户脚本：

// ==UserScript==
// @name         Fix Middle-Click Links (K12/D2L)
// @namespace    https://github.com/user/scripts
// @version      1.1
// @description  Restore middle-click & new-tab support by injecting data-url into href
// @author       You
// @match        *://*.k12.com/*
// @match        *://*.brightspace.com/*
// @match        *://*/d2l/*
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  function updateLinks() {
    document.querySelectorAll('a[data-url]').forEach(a => {
      const dataUrl = a.dataset.url;
      // 仅处理符合重定向模式的 data-url（如 /k12/redirect?url=...）
      if (dataUrl && dataUrl.startsWith('/k12/redirect?url=')) {
        try {
          const rawTarget = dataUrl.substring('/k12/redirect?url='.length);
          const decodedUrl = decodeURIComponent(rawTarget);
          // 安全校验：确保是合法 HTTP(S) URL，避免 XSS 风险
          if (/^https?:\/\//.test(decodedUrl)) {
            a.href = decodedUrl;
          }
        } catch (e) {
          console.warn('Failed to decode data-url:', dataUrl, e);
        }
      }
      // 可选：支持其他重定向格式（如 D2L 的 /d2l/le/... 或 base64 编码）
      else if (dataUrl && /^https?:\/\//.test(dataUrl)) {
        a.href = dataUrl;
      }
    });
  }

  // 页面加载完成后立即执行一次
  updateLinks();

  // 监听 DOM 变化（更优雅替代 setInterval）
  const observer = new MutationObserver(() => {
    updateLinks();
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

  // 可选：为单页应用（SPA）补充 hashchange 和 popstate 监听
  window.addEventListener('hashchange', updateLinks);
  window.addEventListener('popstate', updateLinks);
})();

✅ 关键优化说明：

使用 MutationObserver 替代 setInterval(1000)，避免轮询开销，响应更及时；
添加 decodeURIComponent() 处理 URL 编码，防止中文路径或特殊字符解析失败；
加入正则校验 /^https?:\/\//，拒绝非法协议（如 javascript:），提升安全性；
支持多平台匹配（K12、D2L/Brightspace），可通过 @match 规则灵活扩展；
兼容 SPA 场景，监听 hashchange 和 popstate 事件应对路由切换。

⚠️ 注意事项：

若页面使用 Shadow DOM，需额外配置 observer 的 shadow: true 选项；
某些站点可能对 href 修改做拦截（如绑定 click 事件并 preventDefault()），此时需同步移除或重写事件监听器；
脚本生效后，原 target="_self" 仍有效，如需默认新标签页，可追加 a.target = '_blank'; a.rel = 'noopener';；
首次安装后需刷新页面，且确保 Tampermonkey 已启用该脚本。

通过此方案，你无需依赖 Chrome 扩展，即可在不修改网站源码的前提下，一键恢复链接的原生交互能力——真正让「中键点击」回归高效浏览体验。

好了，本文到此结束，带大家了解了《如何将 data-url 动态注入 href 实现中键点击新标签页打开》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

资料下载

编程学习资料下载

精选编程（Golang、Python、Java、C++、JavaScript等）教程、电子书与示例源码，一键打包本地下载学习。

立即下载