如何将 data-url 属性自动注入 href 实现中键点击新标签页打开-js教程-PHP中文网

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

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

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

在许多教育平台（如 k12 learning）中，开发者为实现前端路由或埋点追踪，常将链接写成并通过 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"，进一步提升用户体验与安全性。

⚠️ 注意事项：