首页 游戏 软件 资讯 排行榜 专题
首页
前端开发
如何将 data-url 动态注入 href 实现中键点击新标签页打开

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

热心网友
51
转载
2026-04-23

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

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

免费影视、动漫、音乐、游戏、小说资源长期稳定更新! 👉 点此立即查看 👈

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

如果你经常在一些教育平台(比如 K12 Learning、D2L Brightspace)上浏览,可能会遇到一个不大不小的麻烦:页面上的链接,用鼠标中键点不开,按住 Ctrl 再点左键也没反应。这背后的原因,往往是开发者为了前端路由或跳转控制,把 标签的 href 属性设置成了 “#”,而把真实的跳转地址藏在了 data-url 里。这种写法方便了 Ja vaScript 控制跳转逻辑,却牺牲了浏览器的原生交互体验——用户那些习以为常的快捷操作,比如中键点击、右键“在新标签页中打开”,全都失效了。

那么,有没有办法在不修改网站源码的前提下,优雅地解决这个问题呢?答案是肯定的。解决思路其实很直接:把 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 轮询。这意味着脚本只在 DOM 结构真正发生变化时才执行,响应更及时,性能开销也更小。
  • 解码与校验,一个都不能少:脚本会先用 decodeURIComponent() 处理 URL 编码,防止中文路径或特殊字符解析失败。之后,还会用正则表达式 /^https?:\/\// 进行校验,只接受合法的 HTTP(S) 协议,从根本上杜绝了潜在的 XSS 风险。
  • 兼容多平台,扩展性强:脚本的 @match 规则已经覆盖了 K12、D2L/Brightspace 等常见平台。如果你需要适配其他网站,只需按规则添加匹配模式即可,非常灵活。
  • 为单页应用(SPA)保驾护航:现代网站很多都是单页应用,仅靠初始加载执行一次是不够的。因此,脚本额外监听了 hashchange 和 popstate 事件,确保在路由切换后,新加载的链接也能被正确处理。

注意事项

当然,在部署和使用时,还有几个细节需要留意:

  • 如果目标页面使用了 Shadow DOM 技术,需要在配置 MutationObserver 时额外设置 { shadow: true } 选项。
  • 有些站点可能在链接上绑定了 click 事件并调用了 preventDefault() 来阻止默认行为。如果遇到这种情况,脚本修改 href 后可能仍无法点击,此时需要进一步分析并重写或移除相关的事件监听器。
  • 脚本只负责恢复 href,原链接的 target=“_self” 属性依然有效。如果你希望所有链接默认都在新标签页打开,可以在脚本中追加设置 a.target = ‘_blank’; a.rel = ‘noopener’;。
  • 首次安装脚本后,需要刷新一下页面才能生效,同时请确保 Tampermonkey 扩展已启用该脚本。

总的来说,通过这个轻量级的 Tampermonkey 方案,你无需安装臃肿的浏览器扩展,也无需请求网站管理员修改代码,就能一键恢复链接的原生交互能力。让鼠标中键和 Ctrl+点击重新变得高效,这才是浏览体验该有的样子。

来源:https://www.php.cn/faq/2331051.html
免责声明: 游乐网为非赢利性网站,所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系youleyoucom@outlook.com。

相关攻略

aoc显示器怎么调最好亮度
电脑教程
aoc显示器怎么调最好亮度

AOC显示器的最佳亮度,究竟怎么调? 说到AOC显示器的最佳亮度,一个经过多家专业实验室反复验证的黄金区间是50到60。这个数值可不是随便定的,它是在标准办公室光照(300-500勒克斯)环境下测出来的,能在保证画面层次丰富、细节清晰的同时,最大程度地照顾你长时间盯着屏幕的眼睛舒适度。调节起来,其实

热心网友
04.25
poe交换机插网线有顺序吗
电脑教程
poe交换机插网线有顺序吗

POE交换机插网线有顺序吗? 先说一个核心结论:给POE交换机插网线,物理端口顺序可以随意,但网线内部的“秩序”绝不能乱。这里的关键,在于网线本身必须严格按照T568A或T568B标准来制作,并且全程得用8芯全通、无氧铜材质的超五类及以上规格网线。为什么这么讲究?依据在于国际通行的IEEE 802

热心网友
04.25
如何使用SQL存储过程封装函数_统一业务逻辑提升复用性
数据库
如何使用SQL存储过程封装函数_统一业务逻辑提升复用性

SQL存储过程与函数:复用逻辑的正确打开方式 开门见山,先说一个核心判断:试图用SQL存储过程去直接“封装”函数,这条路基本走不通。 原因很简单,存储过程和标量函数、表值函数,从设计定位、语法结构到调用方式,完全是两套不同的体系。如果目标是为了复用业务逻辑,第一步不是强行封装,而是先搞清楚:什么场景

热心网友
04.25
SQL如何处理嵌套查询中的重复列名冲突_使用别名规范化
数据库
SQL如何处理嵌套查询中的重复列名冲突_使用别名规范化

SQL子查询的“列名冲突”与别名规范:从报错到根治 在编写SQL时,子查询是构建复杂逻辑的利器,但稍不注意,就可能掉进“列名不明确”的坑里。核心问题往往出在上下文隔离上:外层查询无法识别子查询内部的字段来源,一旦出现重名列,数据库引擎就“懵了”。要解决这个问题,关键在于显式指定字段、规范使用别名,并

热心网友
04.25
SQL如何计算移动平均值_使用ROWS BETWEEN窗口定义
数据库
SQL如何计算移动平均值_使用ROWS BETWEEN窗口定义

SQL移动平均必须用ROWS BETWEEN而非RANGE,因RANGE按值分组遇重复值会导致窗口边界漂移,而ROWS严格按物理行数滑动,确保“最近N条”的准确平均;如7日均值需ROWS BETWEEN 6 PRECEDING AND CURRENT ROW。 SQL移动平均为什么必须用ROWS B

热心网友
04.25

最新APP

宝宝过生日
宝宝过生日
应用辅助 04-07
台球世界
台球世界
体育竞技 04-07
解绳子
解绳子
休闲益智 04-07
骑兵冲突
骑兵冲突
棋牌策略 04-07
三国真龙传
三国真龙传
角色扮演 04-07

热门推荐

《异环》六大保险点位分享
游戏攻略
《异环》六大保险点位分享

《异环》六大保险点位分享:轻松入手海量方斯 在《异环》的世界里探索,手头紧可不行。好消息是,地图上藏着一些“大保险”,打开就能获得海量的游戏货币——方斯。这无疑是快速积累前期资本、提升游戏体验的捷径。今天,我们就来详细盘点一下由“一世逍遥”发现的六大保险点位,帮你把资源稳稳收入囊中。 以上便是目前整

热心网友
04.25
异环共存测试什么时候开启
游戏攻略
异环共存测试什么时候开启

异环共存测试:开启技术协同新篇章的关键一步 在科技前沿领域,异环共存测试正逐渐从理论构想走向实践舞台,成为推动相关技术从实验室走向规模化应用不可或缺的一环。它的意义,远不止于一次简单的技术验证。 测试启动在即:万事俱备,只待东风 那么,这项备受瞩目的测试究竟何时会正式启动?这无疑是圈内人士共同关注的

热心网友
04.25
免费行情软件网站app官方版 币圈行情网站app推荐
web3.0
免费行情软件网站app官方版 币圈行情网站app推荐

对于加密货币投资者而言,及时获取准确的行情数据至关重要 想在币圈做出明智的决策,手里没几件趁手的“兵器”可不行。今天,我们就来盘点几款市场上广受好评的免费行情工具,从交易所App到专业数据平台,它们各有所长,能帮你把市场脉搏摸得更准。 主流交易所App(行情与交易一体) 对于大多数投资者来说,交易所

热心网友
04.25
明日方舟贝洛内是否值得培养
游戏攻略
明日方舟贝洛内是否值得培养

在明日方舟的众多角色中,贝洛内是一位颇具特色的干员,其是否值得培养引发了不少玩家的讨论。 贝洛内的技能机制,可以说是她最亮眼的招牌。一技能“强化下次攻击”,听起来简单,实战中却颇有讲究。面对那些皮糙肉厚的敌人,这一下高额伤害往往能起到关键的破防作用,为后续输出打开局面。而她的二技能就更具战术价值了,

热心网友
04.25
如何退出weverse加入的社区
游戏攻略
如何退出weverse加入的社区

如何退出Weverse社区?一份详细的操作指南 在Weverse上,随着兴趣变化或时间安排调整,你可能需要退出一些已加入的社区。这个过程其实并不复杂,但了解清楚每一步,能帮你避免误操作。下面就来详细拆解一下整个流程。 第一步:定位并进入目标社区 首先,确保你已经登录了自己的Weverse账号。打开应

热心网友
04.25