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

作者：袖梨 2026-07-17

本文介绍一种轻量级、无需安装扩展的方案：使用 Tampermonkey 脚本自动提取 <a> 标签中的 data-url 值，替换 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"，使中键点击、Ctrl+点击或右键“在新标签页中打开”等功能恢复正常。

本文介绍一种轻量级、无需安装扩展的方案：使用 tampermonkey 脚本自动提取 `

在许多教育平台（如 k12 learning）中，开发者为实现前端路由或埋点追踪，常将链接写成 <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"> 并通过 data-url 存储真实跳转地址。这类写法虽兼容 javascript 导航，却破坏了原生链接语义——导致无法中键点击、无法拖拽复制 url、无法用快捷键（如 ctrl/cmd+click）新开标签页。

解决此问题无需浏览器扩展，推荐使用 Tampermonkey（油猴）脚本，它可安全、精准地动态修复 DOM 中的链接行为。以下是一个稳定可靠的解决方案：

// ==UserScript==// @name         Fix data-url Links for Middle-Click// @namespace    https://tampermonkey.net/// @version      1.1// @description  将 data-url 的值注入 href，恢复中键点击/新标签页打开功能// @author       You// @match        *://*.k12.com/*// @match        *://learning.k12.com/*// @grant        none// ==/UserScript==(function() {  'use strict';  function updateLinks() {    document.querySelectorAll('a[data-url][href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"]').forEach(a => {      const dataUrl = a.dataset.url;      // 仅处理符合重定向模式的 data-url（如 /k12/redirect?url=...）      if (dataUrl && dataUrl.startsWith('/k12/redirect?url=')) {        try {          const rawUrl = dataUrl.substring('/k12/redirect?url='.length);          const decodedUrl = decodeURIComponent(rawUrl);          // 验证解码后是否为合法 URL（防止 XSS 或无效值）          if (/^https?:///.test(decodedUrl)) {            a.href = decodedUrl;            a.target = '_blank'; // 可选：强制新标签页打开（兼顾中键与快捷键）            a.rel = 'noopener noreferrer'; // 安全增强          }        } catch (e) {          console.warn('Failed to decode data-url on:', a, e);        }      }    });  }  // 页面加载后立即执行一次  updateLinks();  // 使用 MutationObserver 替代轮询，更高效、更现代  const observer = new MutationObserver(() => {    updateLinks();  });  observer.observe(document.body, {    childList: true,    subtree: true  });})();

✅ 关键优化说明：

使用 MutationObserver 实时监听 DOM 新增节点（如异步加载的课程列表），替代低效的 setInterval 轮询；
严格匹配 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 和 data-url 属性，避免误改其他链接；
对 data-url 进行 decodeURIComponent 解码，并校验协议头（https?://），保障安全性与健壮性；
主动设置 target="_blank" 和 rel="noopener noreferrer"，进一步提升用户体验与安全性。

⚠️ 注意事项：