通过书签更好

核心要点

• 书签小程序是嵌入浏览器书签中的小型 JavaScript 代码，可增强 Web 浏览器的功能并简化 Web 开发人员的工作流程。
• 书签小程序的用途范围很广，从简单的导航任务到更复杂的操作，例如修改页面内容、分析页面的结构，甚至自动化网站上的任务。
• 虽然书签小程序通常安全可靠，但它们可能会导致命名空间冲突。可以通过创建具有自身变量作用域的匿名函数作为书签小程序来避免此问题。
• 对于复杂的书签小程序，存在一种方法可以绕过某些浏览器中书签的长度限制。实际的书签小程序实现可以作为外部 .js 文件托管在 Web 服务器上，而书签小程序可以包含一个加载存根，用于加载其余脚本。

书签小程序是为您的 Web 浏览器添加功能的一种简单方法，对于 Web 开发人员的工作流程来说，它可以是一个有用的补充。在本文中，我将指出一些有用的书签小程序，提供有关构建您自己的书签小程序的技巧，并演示一些高级技术，以充分利用这些强大的工具。书签小程序是嵌入浏览器书签中的简短 JavaScript 代码段。当选择书签时，将执行 JavaScript 代码。神奇的是，此执行发生在当前页面的上下文中。书签小程序可以访问页面的完整文档对象模型，并可以修改它并使用其中的信息来启动新窗口或将浏览器重定向到其他站点。如果您以前从未尝试过使用书签小程序，建议您在阅读本文的其余部分之前先尝试一下。www.bookmarklets.com 和 www.favelets.com 都提供了大量的书签小程序集合，Jesse Ruderman 在 www.squarefree.com/bookmarklets 上拥有可以说是 Web 上最全面的书签小程序集合。Jesse 的 Web 开发书签小程序尤其应该成为任何 Web 开发人员浏览器的必备补充。书签小程序适用于所有支持 JavaScript 的现代浏览器，但有些浏览器比其他浏览器更友好。Windows 版 Internet Explorer 6 存在令人恼火的 508 个字符的书签大小限制，这严重限制了该浏览器可用的书签小程序范围，尽管我稍后将介绍的技术确实提供了一种部分补救方法。为了充分利用书签小程序，我建议您使用基于 Mozilla 的浏览器，例如优秀的 Firefox，它还附带许多有用的工具来帮助书签小程序的开发。然而，书签小程序开发的魅力之一在于，经常困扰严重 JavaScript 开发的跨浏览器问题可以避免：为特定浏览器开发书签小程序（尤其是个人使用的书签小程序）没有任何问题，因此开发人员实际上可以做任何浏览器允许他们做的事情。

常见的书签小程序变体

如果您浏览了前面提到的任何站点，您应该对书签小程序可以提供的巨大功能范围有所了解。最简单、最常见的书签小程序类型是简单的导航书签小程序，它获取当前页面的 URL 并将其传递到另一个站点。经典示例是“验证”书签小程序，它将用户重定向到当前页面的在线 HTML 或 CSS 验证服务。这些书签小程序创建起来非常简单，但可以适应一些非常有用的用途。我非常喜欢为由基于 Web 的内容管理系统驱动的网站创建“编辑此页面”书签小程序。许多此类系统会在公共站点页面 URL 中嵌入 ID，直接对应于在站点管理系统中用于编辑该页面内容的表单 URL 中使用的 ID。“编辑此页面”书签小程序提取当前页面的 URL 并使用它来立即将用户重定向到该页面的编辑界面。例如，想象一下一个具有以下 URL 的站点：

<code>http://www.site.com/articles/123</code>

该站点还有一个受密码保护的管理界面，它在以下地址提供“编辑页面”界面：

<code>http://www.site.com/admin/edit-article?id=123</code>

上述站点的“编辑此页面”书签小程序可以这样实现：

javascript:document.location='http://www.site.com/admin/edit-article?id='+document.location.href.split('/').pop()

如果您对站点上使用的内容管理系统有一定的控制权，则可以极大地扩展此概念。例如，在一个未在 URL 中公开文章内部 ID 的站点中，您可以改为在 HTML 元标记中提供 ID，然后可以通过 DOM 提供给“编辑此页面”书签小程序。许多书签小程序以某种方式修改当前页面。常见的示例包括用于“消除”烦人的内容的书签小程序，例如不需要的 Flash 动画，甚至是大小调整为横幅广告常用尺寸的图像。这些可能很有趣，但通常受到每次加载页面时都需要手动激活的限制。更有用的是帮助 Web 开发人员分析页面结构甚至修改页面结构（“实时”）的书签小程序。我最喜欢的这类小程序是 Jesse Ruderman 的“测试样式”、“编辑样式”和“祖先”，来自他的 Web 开发集合。后者显示了通向鼠标光标下页面部分的 HTML 元素层次结构，这对于弄清楚如何将 CSS 应用于页面非常有用。前两者允许“实时”修改当前页面的 CSS，从而提供对潜在设计更改的即时反馈。我的 Mozilla 图像拖动书签小程序使页面上的每个非背景图像都“可拖动”，这在考虑页面设计的调整时也可能有所帮助。一个有用但经常被忽视的 JavaScript 技巧是，整个 HTML 页面可以嵌入到书签小程序中。尝试直接在浏览器的 URL 栏中输入以下内容：

javascript:'<h1 id="This-is-HTML">This is HTML</h1>'

浏览器应该显示字符串中呈现的 HTML。它这样做是因为该字符串被评估为表达式，其结果然后显示在当前浏览器窗口中。同样的技巧甚至可以用来将您的浏览器变成一个过于指定的计算器：

<code>http://www.site.com/articles/123</code>

有时编写以这种方式嵌入整个页面的书签小程序可能很有用，尤其是在它们需要比简单的 confirm() 和 prompt() 框更复杂的用户界面时。

辅助文本输入

我在网上花费大量时间盯着 textarea 框。我更新的三个博客都是通过 textarea 维护的，我的工作中开发的站点和参与的各种在线论坛也是如此。Textarea 无处不在。它们也是一种远非最佳的处理文本的方式，尤其是在与专用的文本编辑器软件相比时。书签小程序可以使处理 textarea 明显不那么痛苦，并且可以为它们提供有用的附加功能。我最喜欢的 textarea 增强书签小程序示例是来自 Jesse Ruderman 的另一个：Blogidate XML 良构性——一个 Mozilla/FireFox 书签小程序，它检查页面上每个 textarea 中的文本是否为良构 XML 并相应地更改 textarea 的背景颜色。这对于在将 XHTML 发布到站点之前捕获 XHTML 中的简单错误非常有用。Jesse 还有一套 HTML 验证书签小程序，它们使用 WDG 验证器检查 textarea 中 HTML 片段的语法。我经常使用的另一个工具是我的扩展 HTML 简写书签小程序。它对 textarea 中的文本应用一系列简单的转换：

1. 通过空行彼此分隔的文本块用段落标记包装
2. 以 = 符号开头的行转换为 #### 标题
3. 以 * 开头的行成为项目符号列表

示例：

<code>http://www.site.com/admin/edit-article?id=123</code>

变成：

javascript:document.location='http://www.site.com/admin/edit-article?id='+document.location.href.split('/').pop()

• list 1
• list 2

较短的版本适用于 IE。此版本牺牲了标题支持以适应 508 个字符的限制：扩展 HTML 简写 IE。扩展 HTML 简写：

javascript:'<h1 id="This-is-HTML">This is HTML</h1>'

扩展 HTML 简写 IE：

javascript:1 + 4;

未展开的源代码（在移除空格之前）如下所示：

<code>= Header

Paragraph

* list 1
* list 2</code>

书签小程序创建工具

您可以只使用文本编辑器创建书签小程序——或者，如果您非常自信，可以直接将它们键入浏览器的“新建书签”字段中。但是，对于比简单的导航书签小程序更复杂的内容，使用专用工具是有意义的。如果您使用的是 Firefox，则已经可以访问一些有用的书签小程序创建辅助工具。Firefox 的 JavaScript 控制台是一个宝贵的调试工具，DOM 检查器在编写修改页面内容的书签小程序时，是探索页面 DOM 树的绝佳辅助工具。Jesse Ruderman 的 Firefox 和 Mozilla 的 shell 书签小程序提供了一个附加到当前页面上下文的交互式 JavaScript 提示符，这是一种在将新技术提交到文本编辑器之前尝试新技术的好方法。虽然书签小程序不能包含换行符，但对于编写超过少量语句的内容，务必保持源代码缩进。我的移除换行符书签小程序（如下）是一个工具，用于从 JavaScript 代码块中移除制表符、换行符和多个空格。在许多情况下，这正是您从简单的代码块创建书签小程序所需做的全部工作，尽管您必须记住在转换之前用分号终止每一行。书签小程序也是嵌入书签小程序中的 HTML 页面的示例。移除换行符：

<code>http://www.site.com/articles/123</code>

避免变量作用域冲突

书签小程序引入的一个潜在问题是命名空间冲突：如果您的书签小程序使用或重新定义了页面上其他脚本已在使用的变量会怎样？避免此问题的一种技术是使用不太可能已被使用的随机变量名，但这会使书签小程序代码更难以阅读，并会增加书签小程序的不必要长度。更好的解决方案是创建具有自身变量作用域的匿名函数作为书签小程序。以下是它的工作原理：

<code>http://www.site.com/admin/edit-article?id=123</code>

此处的 function() { } 部分是一个匿名函数——一个未声明其名称的函数。通过将函数括在括号中并在末尾添加 ()，该函数将在创建后立即执行一次，即书签小程序激活的瞬间。只要匿名函数体内的变量使用“var”关键字声明，它们就会被限制在函数的作用域内，并且不会干扰文档其余部分中具有相同名称的变量。由于 JavaScript 的函数特性，您甚至可以在匿名函数中声明其他函数，而无需将它们添加到文档的全局作用域。

追加更长的脚本

我前面提到过，存在一种方法可以绕过 Internet Explorer 对书签长度的限制。此方法还允许以标准缩进的 JavaScript 编写书签小程序，而无需将整个脚本保留在一行上，这使其成为为任何浏览器实现的更复杂书签小程序的有用技术。诀窍是将实际的书签小程序实现作为外部 .js 文件托管在某个 Web 服务器上。然后，书签小程序只需要包含用于加载其余脚本的“存根”代码——这可以通过 508 个字符的限制轻松实现。以下是加载存根书签小程序代码，为了可读性而进行了缩进：

<code>http://www.site.com/articles/123</code>

移除空格后，上述代码（减去外部脚本 URL）达到 193 个字符。此代码有一个缺点：它不适用于 Macintosh 版 IE5。如果 Macintosh 版 IE5 支持对您的书签小程序很重要，liorean 还有一个扩展版本的加载存根，它使用浏览器检测来同时满足该浏览器。

进一步阅读

了解书签小程序的最佳方法是查看其他人编写的书签小程序：

• www.bookmarklets.com
• www.favelets.com
• www.squarefree.com/bookmarklets/

我希望这次关于书签小程序的快速浏览能激励您尝试自己创建书签小程序。

关于书签小程序的常见问题解答

书签小程序是什么？它们是如何工作的？

书签小程序是存储在 Web 浏览器书签中的 URL 中的小型 JavaScript 代码片段。当您单击书签时，JavaScript 代码将在当前页面上运行，而不是加载新页面。这允许您向网站添加新功能、自动化重复性任务甚至玩游戏，而无需安装任何软件或扩展程序。

如何创建书签小程序？

创建书签小程序就像创建书签一样简单。您无需输入 URL，而是输入一段 JavaScript 代码。当您单击书签时，将执行此代码。您可以编写自己的代码或在线查找预先制作的书签小程序。

书签小程序安全吗？

书签小程序通常安全可靠，因为它们在您的浏览器中运行，并且无法访问您计算机的文件系统。但是，与任何代码一样，它们也可能被恶意使用。务必仅使用来自可信来源的书签小程序，并在使用之前了解代码的功能。

我可以在任何网站上使用书签小程序吗？

理论上，书签小程序可以在任何网站上使用。但是，某些网站可能已实施安全措施以阻止书签小程序工作。此外，书签小程序的功能可能取决于其所用网站的结构。

为什么我的书签小程序不起作用？

您的书签小程序不起作用可能有几个原因。您尝试在其上使用它们的网站可能已实施安全措施以阻止书签小程序工作。书签小程序中的代码可能已过期或与网站不兼容。或者代码本身可能存在错误。

如何调试书签小程序？

调试书签小程序可能有点棘手，因为它们没有传统的调试环境。但是，您可以使用浏览器的开发者工具来检查代码并查看任何错误消息。您还可以尝试在浏览器的控制台中运行代码，看看它是否在那里工作。

我可以在移动设备上使用书签小程序吗？

是的，您可以在移动设备上使用书签小程序。但是，添加和使用它们的过程可能比在桌面浏览器上更复杂。您可能需要手动将 JavaScript 代码输入书签，因为移动浏览器通常不支持桌面浏览器上使用的拖放方法。

我可以与他人共享书签小程序吗？

是的，您可以与他人共享书签小程序。只需向他们发送 JavaScript 代码以及有关如何将其添加到其书签的说明即可。但是，请记住，只共享来自可信来源的书签小程序，并且您了解代码的功能。

我可以使用书签小程序来更改网站的外观吗？

是的，您可以使用书签小程序来更改网站的外观。这是通过操作网站的 CSS 来完成的。但是，这些更改只是临时的，刷新页面后将丢失。

我可以使用书签小程序来自动执行网站上的任务吗？

是的，您可以使用书签小程序来自动执行网站上的任务。这可以是任何事情，从填写表单到单击按钮。但是，书签小程序的功能将取决于网站的结构和您要自动执行的任务。

以上是通过书签更好的详细内容。更多信息请关注PHP中文网其他相关文章！