使用浏览器书签(收藏夹)来运行 JavaScript 代码

本篇文章分享使用浏览器书签(收藏夹)来运行 JavaScript 代码，对你有帮助的话记得收藏一下，看Java资料网收获更多编程知识

1. 作用

其实，这个操作并没有什么太大作用，真的有需要处理的网页内容，基本都是通过油猴脚本来处理，或者就是自己开发浏览器插件来处理。

也就一些小的通用的功能可以用这种方式来玩玩。在后面的实操部分，我会实现一个：一键让网页中的链接默认在新的标签页中打开的功能。

其实这个操作还可以与另外一个浏览器插件 Vimium C 配合起来实现一些小功能。可以看看这篇我写的文章：使用 Vimium C 插件来运行 JavaScript 代码

2. 原理

其实就是利用浏览器的地址栏可以运行如下结构的 JavaScript 代码的特性：

javascript: (alert(0))();

然后又因为浏览器的书签，其实就是一个名称对应到一个URL，重点就是这个 URL，也就是说在 URL 中写上上面的代码，那么点击这个书签就是执行这段代码，而不是打开某一个网页。

我们可以将要实现的具体的代码逻辑写在 alert(0) 的位置。就可以利用书签来一键运行代码了。

讲起来比较空泛，看实操部分吧。

3. 实操：一键修改链接的属性

我有这样一个需求：

就是一些网页中的链接，默认是在当前标签页中打开的，但有时候其实我们是希望它在新的标签页中打开的，也就是保留当前标签页的网页内容。尤其是一些国外的网站就喜欢默认在当前标签页中打开，比如：谷歌搜索，GitHub等。

所以，每次都要用鼠标右键链接，然后选择在新的标签页中打开，是挺麻烦的。
如果你使用了 vimium C 这样的 vim 操作习惯的浏览器插件，可以通过字母 F 然后再按2-3次别的按键，也可以在新的标签页中打开。
当然还可以按住 Ctrl 键再点击。但总归是麻烦了点。

3.1. 具体的做法

首先，先打开一个空的标签页，然后将这个标签页加入书签，然后右键编辑这个书签，在 Name 这里随便取一个名字即可。重点是 URL 部分，就写上具体的代码，在这个例子中的代码看后面的：【完整的示例代码】

如下图：

3.2. 完整的示例代码

拷贝下面代码框中的代码到上面的 URL 中即可。

下面这段代码就是实现：循环遍历整个网页上的链接，设置它的 target 属性的值为 _blank ，这样，我们直接单击它的时候，就默认是在新的标签页中打开了。

然后还做了一点提示的效果，就是在处理完成后，在网页的右上角显示一条提示，随后再移除这个提示。如下图所示：

完整代码如下：

javascript: (function () {
  var links = document.getElementsByTagName("a");
  for (var i = 0; i <= links.length; i++) {
    if (links[i]) {
      links[i].setAttribute("target", "_blank");
    }
  }
  var toast = document.createElement("div");
  toast.style.color = "white";
  toast.style.fontSize = "36px";
  toast.style.fontWeight = "bold";
  toast.style.lineHeight = "50px";
  toast.style.padding = "5px 10px";
  toast.style.backgroundColor = "darkslategrey";
  toast.style.border = "none";
  toast.style.borderRadius = "10px";
  toast.style.position = "fixed";
  toast.style.top = "80px";
  toast.style.right = "80px";
  toast.style.zIndex = "9999";
  toast.style.transition = "1s";
  toast.textContent = "链接可以在新标签中打开了";
  document.body.appendChild(toast);
  setTimeout(() => {
    toast.style.opacity = "0";
    setTimeout(() => {
      document.body.removeChild(toast);
    }, 500);
  }, 1500);
})();

所以，只要复制上面的代码到之前的书签的 URL 中粘贴，然后保存。
保存后，就可以在任何网页上点击这个书签栏上的书签，它就会处理这个网页中已经存在的链接，然后你再点击这些链接，它们就会默认在新的标签页中打开链接了。

4. 注意事项

你自己在编写自己的逻辑代码的时候要注意，这个代码中不要留有注释，因为复制到 URL中后，这些多行形式的代码会被转为单行形式，这会导致你写的注释将后面的代码也给注释掉了。

另外，上面我提供的代码，并不是可以处理所有的情况，有以下的情况，上面提供的现成的代码是无法处理的：

1. 就是那种处于 Shadow Root 中的链接，比如：Z-Library 这个网站上的书籍推荐列表就无法处理，这是我遇到过的网站。原因好像是因为它们不属于同一颗DOM树，所以， document.getElementsByTagName(“a”); 无法找到它们。【我对于这个技术也不了解，感兴趣的话请自行查阅】
2. 对于那种动态生成的链接也无法处理，原因很简单，因为我们的脚本是只运行一次，对于我们点击之后动态生成的链接，它们并没有被处理。遇到的网站：比如：MDN 的搜索框中搜索到的内容，它们也是链接，点击后默认也是在当前标签页中打开。

但其实上面这两种情况遇到的并不多。

如果，你想要解决动态生成的链接的问题，那么可以考虑使用 mutation observer 这个技术了。这是一个非常强大的API，配合油猴脚本可以解决很多问题，详细的内容就自行查阅文档，或者询问 AI 吧。【其实我也太不喜欢提到一个技术，然后又让别人去自行搜索这样的写法，但实在是个人时间精力有限。即便如此，我依然将这个技术的名称写在这里，就是为了方便一部分人群，他们距离解决问题可能就差知道一个技术的名称而已。】

有什么问题，欢迎大家在下方讨论。

文章来源:https://blog.csdn.net/qq_43535992/article/details/144246634
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！