本文详解如何编写一个轻量、跨域可用的 Bookmarklet，一键将当前网页中全部 标签的 href 替换为目标 URL，并确保修改即时生效、点击跳转正确。
本文详解如何编写一个轻量、跨域可用的 bookmarklet，一键将当前网页中全部 `` 标签的 `href` 替换为目标 url，并确保修改即时生效、点击跳转正确。
要实现一个真正可用的链接批量替换 Bookmarklet，关键在于：直接操作 DOM 元素的 href 属性（而非 setAttribute），并确保代码在任意第三方页面中无依赖、可立即执行。
你最初尝试的代码：
a.forEach(function(a){ a.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"; });
存在两个核心问题：
- 变量 a 未定义 —— forEach 需要一个有效的 NodeList 或数组作为调用对象；
- 缺少 DOM 查询逻辑 —— 没有通过 document.getElementsByTagName("a") 或 document.querySelectorAll("a") 获取锚元素集合。
✅ 正确写法（兼容性高、简洁可靠）如下：
javascript:(function(){var url="https://www.youtube.com/watch?v=dQw4w9WgXcQ";var links=document.querySelectorAll("a[href]");links.forEach(function(el){el.href=url;});alert("已更新 "+links.length+" 个链接");})();
? 说明与优化点：
- 使用 document.querySelectorAll("a[href]") 精准筛选已有 href 属性的 标签（避免干扰空链接或 JS 链接）；
- 直接赋值 el.href = url（而非 el.setAttribute("href", url)），确保浏览器解析为绝对 URL 并正确触发导航行为；
- 包裹在立即执行函数 (function(){...})() 中，避免变量污染全局作用域；
- 末尾加 void 0 或空括号 () 是 Bookmarklet 标准写法，防止部分浏览器意外跳转。
⚠️ 注意事项：
- 某些网站通过 click 事件监听器或 preventDefault() 动态拦截跳转——此时仅改 href 可能无效，需额外覆盖事件（进阶场景，通常无需）；
- 单页应用（SPA）中动态生成的链接可能在 Bookmarklet 执行后才渲染，建议刷新页面或配合 MutationObserver（超出 Bookmarklet 简洁性范畴，不推荐初用）；
- 实际部署时，请将代码压缩为单行（移除换行/空格），并以 javascript: 开头，再保存为书签地址。
? 小技巧： 在浏览器地址栏粘贴以下压缩版，回车即可测试效果（替换前请先打开任意含链接的网页）：
javascript:(function(){var u="https://www.youtube.com/watch?v=dQw4w9WgXcQ";var a=document.querySelectorAll("a[href]");a.forEach(function(e){e.href=u;});alert("✅ 已重定向 "+a.length+" 个链接");})();
这个 Bookmarklet 不依赖外部库、不修改 HTML 结构、不添加 ID/Class，完全满足“在非自有网站上安全、即刻生效”的需求。
