首页 > 网页制作 >data-url自动注入href实现中键打开新标签页

data-url自动注入href实现中键打开新标签页

来源：互联网 2026-07-02 08:37:17

本文介绍一种轻量级、无需安装扩展的方案：使用 Tampermonkey 脚本自动提取标签中的 data-url 值，替换 href 为实际链接，使中键点击、Ctrl+点击或右键“在新标签页中打开”等功能恢复正常。教育类平台中 data-url 链接带来的交互问题许多教育类平台（如 K12 Le

本文介绍一种轻量级、无需安装扩展的方案：使用 Tampermonkey 脚本自动提取标签中的 data-url 值，替换 href 为实际链接，使中键点击、Ctrl+点击或右键“在新标签页中打开”等功能恢复正常。

教育类平台中 data-url 链接带来的交互问题

许多教育类平台（如 K12 Learning）为了实现前端路由或埋点追踪，常常将链接写成这样的形式：。表面上看似乎正常，但仔细分析不难发现——这种写法实际上破坏了原生链接的语义。中键点击无响应、拖拽复制 URL 失效、Ctrl+Click 新开标签页也变成了空谈。用户真正需要的，其实是隐藏在 data-url 属性中的真实地址。

无需扩展的轻量级解决方案：Tampermonkey 脚本

要解决这个问题，完全没必要安装笨重的浏览器扩展。推荐方案是直接使用 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"，确保新标签页能正常打开，同时防止恶意页面利用 window.opener 进行攻击。

注意事项

首次使用需要安装 Tampermonkey 扩展（Chrome / Edge / Firefox 均支持）；
脚本中的 @match 规则已限定在 K12 相关域名下生效，不会影响其他网站；
如果页面使用了强缓存或服务端渲染（SSR），建议在 DOMContentLoaded 事件后再执行首次 updateLinks()——当前脚本已内置此保障。

此方案零依赖、零配置，开箱即用。它既尊重原始页面的逻辑，又能无缝恢复标准链接的交互体验。简单来说，就是让“中键点击”重新发挥它应有的作用。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述