如何让 data-url 链接支持中键点击（新标签页打开）-js教程-PHP中文网

如何让 data-url 链接支持中键点击（新标签页打开）

本文介绍一种基于 Tampermonkey 的轻量级解决方案，通过自动将含 data-url 属性的标签的 href 属性动态替换为真实 URL，使原本禁用中键点击的链接恢复“Ctrl+点击”或鼠标中键新标签页打开功能。

本文介绍一种基于 tampermonkey 的轻量级解决方案，通过自动将含 `data-url` 属性的 `

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-url="/k12/redirect?url=https%3a%2f%2flearning.k12.com%2fd2l%2fle%2fcalendar%2f2015232%2fevent%2f38315900%2fdetailsview" class="js-external-link">课程详情</a>

这类写法虽便于 js 控制跳转逻辑，却直接导致浏览器原生中键（滚轮点击）或 ctrl+左键无法触发新标签页打开——因为 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 指向当前页面锚点，而非有效 url。

✅ 推荐方案：Tampermonkey 用户脚本
安装 Tampermonkey 浏览器扩展后，新建脚本并粘贴以下代码：

// ==UserScript==
// @name         Fix K12 data-url Links
// @namespace    https://github.com/user/scripts
// @version      1.1
// @description  将 data-url 转换为真实 href，支持中键/右键新标签页打开
// @author       You
// @match        *://*.k12.com/*
// @match        *://learning.k12.com/*
// @grant        none
// ==/UserScript==

function updateLinks() {
  document.querySelectorAll('a[data-url]').forEach(a => {
    const dataUrl = a.dataset.url;
    if (dataUrl && dataUrl.startsWith('/k12/redirect?url=')) {
      try {
        const rawUrl = dataUrl.substring('/k12/redirect?url='.length);
        const decodedUrl = decodeURIComponent(rawUrl);
        // 可选：确保协议安全（防止 open redirect）
        if (decodedUrl.startsWith('http://') || decodedUrl.startsWith('https://')) {
          a.href = decodedUrl;
        }
      } catch (e) {
        console.warn('Failed to decode data-url:', dataUrl, e);
      }
    }
  });
}

// 初始执行一次（覆盖已渲染元素）
updateLinks();

// 监听 DOM 变化（更优雅替代 setInterval）
const observer = new MutationObserver(() => {
  updateLinks();
});
observer.observe(document.body, {
  childList: true,
  subtree: true
});

? 关键优化说明：

✅ 使用 MutationObserver 替代 setInterval(1000)，避免轮询开销，响应更及时；
✅ 添加 decodeURIComponent 处理 URL 编码（如 %3A → :），确保链接可访问；
✅ 增加协议校验（仅允许 http:// / https://），提升安全性，防范开放重定向风险；
✅ @match 精确限定生效域名，避免误作用于其他网站。

⚠️ 注意事项：

若页面使用 Shadow DOM 或 Web Components 渲染链接，需额外配置 observer 的 shadow: true 参数；
某些 SPA 应用可能动态修改 a 元素属性，脚本会在每次 DOM 更新后自动重置 href，无需手动干预；
如遇链接仍不可中键打开，请检查是否被页面 JS 事件监听器（如 e.preventDefault()）拦截——此时可在脚本末尾添加 a.removeAttribute('onclick') 等清理逻辑（谨慎使用）。

该方案零依赖、免配置、即装即用，是解决“伪链接”中键失效问题的专业级前端补丁。