核心要點(diǎn)

• 書(shū)簽小程序是嵌入瀏覽器書(shū)簽中的小型 JavaScript 代碼，可增強(qiáng) Web 瀏覽器的功能并簡(jiǎn)化 Web 開(kāi)發(fā)人員的工作流程。
• 書(shū)簽小程序的用途范圍很廣，從簡(jiǎn)單的導(dǎo)航任務(wù)到更復(fù)雜的操作，例如修改頁(yè)面內(nèi)容、分析頁(yè)面的結(jié)構(gòu)，甚至自動(dòng)化網(wǎng)站上的任務(wù)。
• 雖然書(shū)簽小程序通常安全可靠，但它們可能會(huì)導(dǎo)致命名空間沖突?？梢酝ㄟ^(guò)創(chuàng)建具有自身變量作用域的匿名函數(shù)作為書(shū)簽小程序來(lái)避免此問(wèn)題。
• 對(duì)于復(fù)雜的書(shū)簽小程序，存在一種方法可以繞過(guò)某些瀏覽器中書(shū)簽的長(zhǎng)度限制。實(shí)際的書(shū)簽小程序?qū)崿F(xiàn)可以作為外部 .js 文件托管在 Web 服務(wù)器上，而書(shū)簽小程序可以包含一個(gè)加載存根，用于加載其余腳本。

書(shū)簽小程序是為您的 Web 瀏覽器添加功能的一種簡(jiǎn)單方法，對(duì)于 Web 開(kāi)發(fā)人員的工作流程來(lái)說(shuō)，它可以是一個(gè)有用的補(bǔ)充。在本文中，我將指出一些有用的書(shū)簽小程序，提供有關(guān)構(gòu)建您自己的書(shū)簽小程序的技巧，并演示一些高級(jí)技術(shù)，以充分利用這些強(qiáng)大的工具。書(shū)簽小程序是嵌入瀏覽器書(shū)簽中的簡(jiǎn)短 JavaScript 代碼段。當(dāng)選擇書(shū)簽時(shí)，將執(zhí)行 JavaScript 代碼。神奇的是，此執(zhí)行發(fā)生在當(dāng)前頁(yè)面的上下文中。書(shū)簽小程序可以訪問(wèn)頁(yè)面的完整文檔對(duì)象模型，并可以修改它并使用其中的信息來(lái)啟動(dòng)新窗口或?qū)g覽器重定向到其他站點(diǎn)。如果您以前從未嘗試過(guò)使用書(shū)簽小程序，建議您在閱讀本文的其余部分之前先嘗試一下。www.bookmarklets.com 和 www.favelets.com 都提供了大量的書(shū)簽小程序集合，Jesse Ruderman 在 www.squarefree.com/bookmarklets 上擁有可以說(shuō)是 Web 上最全面的書(shū)簽小程序集合。Jesse 的 Web 開(kāi)發(fā)書(shū)簽小程序尤其應(yīng)該成為任何 Web 開(kāi)發(fā)人員瀏覽器的必備補(bǔ)充。書(shū)簽小程序適用于所有支持 JavaScript 的現(xiàn)代瀏覽器，但有些瀏覽器比其他瀏覽器更友好。Windows 版 Internet Explorer 6 存在令人惱火的 508 個(gè)字符的書(shū)簽大小限制，這嚴(yán)重限制了該瀏覽器可用的書(shū)簽小程序范圍，盡管我稍后將介紹的技術(shù)確實(shí)提供了一種部分補(bǔ)救方法。為了充分利用書(shū)簽小程序，我建議您使用基于 Mozilla 的瀏覽器，例如優(yōu)秀的 Firefox，它還附帶許多有用的工具來(lái)幫助書(shū)簽小程序的開(kāi)發(fā)。然而，書(shū)簽小程序開(kāi)發(fā)的魅力之一在于，經(jīng)常困擾嚴(yán)重 JavaScript 開(kāi)發(fā)的跨瀏覽器問(wèn)題可以避免：為特定瀏覽器開(kāi)發(fā)書(shū)簽小程序（尤其是個(gè)人使用的書(shū)簽小程序）沒(méi)有任何問(wèn)題，因此開(kāi)發(fā)人員實(shí)際上可以做任何瀏覽器允許他們做的事情。

常見(jiàn)的書(shū)簽小程序變體

如果您瀏覽了前面提到的任何站點(diǎn)，您應(yīng)該對(duì)書(shū)簽小程序可以提供的巨大功能范圍有所了解。最簡(jiǎn)單、最常見(jiàn)的書(shū)簽小程序類型是簡(jiǎn)單的導(dǎo)航書(shū)簽小程序，它獲取當(dāng)前頁(yè)面的 URL 并將其傳遞到另一個(gè)站點(diǎn)。經(jīng)典示例是“驗(yàn)證”書(shū)簽小程序，它將用戶重定向到當(dāng)前頁(yè)面的在線 HTML 或 CSS 驗(yàn)證服務(wù)。這些書(shū)簽小程序創(chuàng)建起來(lái)非常簡(jiǎn)單，但可以適應(yīng)一些非常有用的用途。我非常喜歡為由基于 Web 的內(nèi)容管理系統(tǒng)驅(qū)動(dòng)的網(wǎng)站創(chuàng)建“編輯此頁(yè)面”書(shū)簽小程序。許多此類系統(tǒng)會(huì)在公共站點(diǎn)頁(yè)面 URL 中嵌入 ID，直接對(duì)應(yīng)于在站點(diǎn)管理系統(tǒng)中用于編輯該頁(yè)面內(nèi)容的表單 URL 中使用的 ID。“編輯此頁(yè)面”書(shū)簽小程序提取當(dāng)前頁(yè)面的 URL 并使用它來(lái)立即將用戶重定向到該頁(yè)面的編輯界面。例如，想象一下一個(gè)具有以下 URL 的站點(diǎn)：

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

該站點(diǎn)還有一個(gè)受密碼保護(hù)的管理界面，它在以下地址提供“編輯頁(yè)面”界面：

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

上述站點(diǎn)的“編輯此頁(yè)面”書(shū)簽小程序可以這樣實(shí)現(xiàn)：

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

如果您對(duì)站點(diǎn)上使用的內(nèi)容管理系統(tǒng)有一定的控制權(quán)，則可以極大地?cái)U(kuò)展此概念。例如，在一個(gè)未在 URL 中公開(kāi)文章內(nèi)部 ID 的站點(diǎn)中，您可以改為在 HTML 元標(biāo)記中提供 ID，然后可以通過(guò) DOM 提供給“編輯此頁(yè)面”書(shū)簽小程序。許多書(shū)簽小程序以某種方式修改當(dāng)前頁(yè)面。常見(jiàn)的示例包括用于“消除”煩人的內(nèi)容的書(shū)簽小程序，例如不需要的 Flash 動(dòng)畫(huà)，甚至是大小調(diào)整為橫幅廣告常用尺寸的圖像。這些可能很有趣，但通常受到每次加載頁(yè)面時(shí)都需要手動(dòng)激活的限制。更有用的是幫助 Web 開(kāi)發(fā)人員分析頁(yè)面結(jié)構(gòu)甚至修改頁(yè)面結(jié)構(gòu)（“實(shí)時(shí)”）的書(shū)簽小程序。我最喜歡的這類小程序是 Jesse Ruderman 的“測(cè)試樣式”、“編輯樣式”和“祖先”，來(lái)自他的 Web 開(kāi)發(fā)集合。后者顯示了通向鼠標(biāo)光標(biāo)下頁(yè)面部分的 HTML 元素層次結(jié)構(gòu)，這對(duì)于弄清楚如何將 CSS 應(yīng)用于頁(yè)面非常有用。前兩者允許“實(shí)時(shí)”修改當(dāng)前頁(yè)面的 CSS，從而提供對(duì)潛在設(shè)計(jì)更改的即時(shí)反饋。我的 Mozilla 圖像拖動(dòng)書(shū)簽小程序使頁(yè)面上的每個(gè)非背景圖像都“可拖動(dòng)”，這在考慮頁(yè)面設(shè)計(jì)的調(diào)整時(shí)也可能有所幫助。一個(gè)有用但經(jīng)常被忽視的 JavaScript 技巧是，整個(gè) HTML 頁(yè)面可以嵌入到書(shū)簽小程序中。嘗試直接在瀏覽器的 URL 欄中輸入以下內(nèi)容：

javascript:'<h1>This is HTML</h1>'

瀏覽器應(yīng)該顯示字符串中呈現(xiàn)的 HTML。它這樣做是因?yàn)樵撟址辉u(píng)估為表達(dá)式，其結(jié)果然后顯示在當(dāng)前瀏覽器窗口中。同樣的技巧甚至可以用來(lái)將您的瀏覽器變成一個(gè)過(guò)于指定的計(jì)算器：

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

有時(shí)編寫(xiě)以這種方式嵌入整個(gè)頁(yè)面的書(shū)簽小程序可能很有用，尤其是在它們需要比簡(jiǎn)單的 confirm() 和 prompt() 框更復(fù)雜的用戶界面時(shí)。

輔助文本輸入

我在網(wǎng)上花費(fèi)大量時(shí)間盯著 textarea 框。我更新的三個(gè)博客都是通過(guò) textarea 維護(hù)的，我的工作中開(kāi)發(fā)的站點(diǎn)和參與的各種在線論壇也是如此。Textarea 無(wú)處不在。它們也是一種遠(yuǎn)非最佳的處理文本的方式，尤其是在與專用的文本編輯器軟件相比時(shí)。書(shū)簽小程序可以使處理 textarea 明顯不那么痛苦，并且可以為它們提供有用的附加功能。我最喜歡的 textarea 增強(qiáng)書(shū)簽小程序示例是來(lái)自 Jesse Ruderman 的另一個(gè)：Blogidate XML 良構(gòu)性——一個(gè) Mozilla/FireFox 書(shū)簽小程序，它檢查頁(yè)面上每個(gè) textarea 中的文本是否為良構(gòu) XML 并相應(yīng)地更改 textarea 的背景顏色。這對(duì)于在將 XHTML 發(fā)布到站點(diǎn)之前捕獲 XHTML 中的簡(jiǎn)單錯(cuò)誤非常有用。Jesse 還有一套 HTML 驗(yàn)證書(shū)簽小程序，它們使用 WDG 驗(yàn)證器檢查 textarea 中 HTML 片段的語(yǔ)法。我經(jīng)常使用的另一個(gè)工具是我的擴(kuò)展 HTML 簡(jiǎn)寫(xiě)書(shū)簽小程序。它對(duì) textarea 中的文本應(yīng)用一系列簡(jiǎn)單的轉(zhuǎn)換：

1. 通過(guò)空行彼此分隔的文本塊用段落標(biāo)記包裝
2. 以 = 符號(hào)開(kāi)頭的行轉(zhuǎn)換為 #### 標(biāo)題
3. 以 * 開(kāi)頭的行成為項(xiàng)目符號(hào)列表

示例：

<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。此版本犧牲了標(biāo)題支持以適應(yīng) 508 個(gè)字符的限制：擴(kuò)展 HTML 簡(jiǎn)寫(xiě) IE。擴(kuò)展 HTML 簡(jiǎn)寫(xiě)：

javascript:'<h1>This is HTML</h1>'

擴(kuò)展 HTML 簡(jiǎn)寫(xiě) IE：

javascript:1 + 4;

未展開(kāi)的源代碼（在移除空格之前）如下所示：

<code>= Header

Paragraph

* list 1
* list 2</code>

書(shū)簽小程序創(chuàng)建工具

您可以只使用文本編輯器創(chuàng)建書(shū)簽小程序——或者，如果您非常自信，可以直接將它們鍵入瀏覽器的“新建書(shū)簽”字段中。但是，對(duì)于比簡(jiǎn)單的導(dǎo)航書(shū)簽小程序更復(fù)雜的內(nèi)容，使用專用工具是有意義的。如果您使用的是 Firefox，則已經(jīng)可以訪問(wèn)一些有用的書(shū)簽小程序創(chuàng)建輔助工具。Firefox 的 JavaScript 控制臺(tái)是一個(gè)寶貴的調(diào)試工具，DOM 檢查器在編寫(xiě)修改頁(yè)面內(nèi)容的書(shū)簽小程序時(shí)，是探索頁(yè)面 DOM 樹(shù)的絕佳輔助工具。Jesse Ruderman 的 Firefox 和 Mozilla 的 shell 書(shū)簽小程序提供了一個(gè)附加到當(dāng)前頁(yè)面上下文的交互式 JavaScript 提示符，這是一種在將新技術(shù)提交到文本編輯器之前嘗試新技術(shù)的好方法。雖然書(shū)簽小程序不能包含換行符，但對(duì)于編寫(xiě)超過(guò)少量語(yǔ)句的內(nèi)容，務(wù)必保持源代碼縮進(jìn)。我的移除換行符書(shū)簽小程序（如下）是一個(gè)工具，用于從 JavaScript 代碼塊中移除制表符、換行符和多個(gè)空格。在許多情況下，這正是您從簡(jiǎn)單的代碼塊創(chuàng)建書(shū)簽小程序所需做的全部工作，盡管您必須記住在轉(zhuǎn)換之前用分號(hào)終止每一行。書(shū)簽小程序也是嵌入書(shū)簽小程序中的 HTML 頁(yè)面的示例。移除換行符：

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

避免變量作用域沖突

書(shū)簽小程序引入的一個(gè)潛在問(wèn)題是命名空間沖突：如果您的書(shū)簽小程序使用或重新定義了頁(yè)面上其他腳本已在使用的變量會(huì)怎樣？避免此問(wèn)題的一種技術(shù)是使用不太可能已被使用的隨機(jī)變量名，但這會(huì)使書(shū)簽小程序代碼更難以閱讀，并會(huì)增加書(shū)簽小程序的不必要長(zhǎng)度。更好的解決方案是創(chuàng)建具有自身變量作用域的匿名函數(shù)作為書(shū)簽小程序。以下是它的工作原理：

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

此處的 function() { } 部分是一個(gè)匿名函數(shù)——一個(gè)未聲明其名稱的函數(shù)。通過(guò)將函數(shù)括在括號(hào)中并在末尾添加 ()，該函數(shù)將在創(chuàng)建后立即執(zhí)行一次，即書(shū)簽小程序激活的瞬間。只要匿名函數(shù)體內(nèi)的變量使用“var”關(guān)鍵字聲明，它們就會(huì)被限制在函數(shù)的作用域內(nèi)，并且不會(huì)干擾文檔其余部分中具有相同名稱的變量。由于 JavaScript 的函數(shù)特性，您甚至可以在匿名函數(shù)中聲明其他函數(shù)，而無(wú)需將它們添加到文檔的全局作用域。

追加更長(zhǎng)的腳本

我前面提到過(guò)，存在一種方法可以繞過(guò) Internet Explorer 對(duì)書(shū)簽長(zhǎng)度的限制。此方法還允許以標(biāo)準(zhǔn)縮進(jìn)的 JavaScript 編寫(xiě)書(shū)簽小程序，而無(wú)需將整個(gè)腳本保留在一行上，這使其成為為任何瀏覽器實(shí)現(xiàn)的更復(fù)雜書(shū)簽小程序的有用技術(shù)。訣竅是將實(shí)際的書(shū)簽小程序?qū)崿F(xiàn)作為外部 .js 文件托管在某個(gè) Web 服務(wù)器上。然后，書(shū)簽小程序只需要包含用于加載其余腳本的“存根”代碼——這可以通過(guò) 508 個(gè)字符的限制輕松實(shí)現(xiàn)。以下是加載存根書(shū)簽小程序代碼，為了可讀性而進(jìn)行了縮進(jìn)：

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

移除空格后，上述代碼（減去外部腳本 URL）達(dá)到 193 個(gè)字符。此代碼有一個(gè)缺點(diǎn)：它不適用于 Macintosh 版 IE5。如果 Macintosh 版 IE5 支持對(duì)您的書(shū)簽小程序很重要，liorean 還有一個(gè)擴(kuò)展版本的加載存根，它使用瀏覽器檢測(cè)來(lái)同時(shí)滿足該瀏覽器。

進(jìn)一步閱讀

了解書(shū)簽小程序的最佳方法是查看其他人編寫(xiě)的書(shū)簽小程序：

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

我希望這次關(guān)于書(shū)簽小程序的快速瀏覽能激勵(lì)您嘗試自己創(chuàng)建書(shū)簽小程序。

關(guān)于書(shū)簽小程序的常見(jiàn)問(wèn)題解答

書(shū)簽小程序是什么？它們是如何工作的？

書(shū)簽小程序是存儲(chǔ)在 Web 瀏覽器書(shū)簽中的 URL 中的小型 JavaScript 代碼片段。當(dāng)您單擊書(shū)簽時(shí)，JavaScript 代碼將在當(dāng)前頁(yè)面上運(yùn)行，而不是加載新頁(yè)面。這允許您向網(wǎng)站添加新功能、自動(dòng)化重復(fù)性任務(wù)甚至玩游戲，而無(wú)需安裝任何軟件或擴(kuò)展程序。

如何創(chuàng)建書(shū)簽小程序？

創(chuàng)建書(shū)簽小程序就像創(chuàng)建書(shū)簽一樣簡(jiǎn)單。您無(wú)需輸入 URL，而是輸入一段 JavaScript 代碼。當(dāng)您單擊書(shū)簽時(shí)，將執(zhí)行此代碼。您可以編寫(xiě)自己的代碼或在線查找預(yù)先制作的書(shū)簽小程序。

書(shū)簽小程序安全嗎？

書(shū)簽小程序通常安全可靠，因?yàn)樗鼈冊(cè)谀臑g覽器中運(yùn)行，并且無(wú)法訪問(wèn)您計(jì)算機(jī)的文件系統(tǒng)。但是，與任何代碼一樣，它們也可能被惡意使用。務(wù)必僅使用來(lái)自可信來(lái)源的書(shū)簽小程序，并在使用之前了解代碼的功能。

我可以在任何網(wǎng)站上使用書(shū)簽小程序嗎？

理論上，書(shū)簽小程序可以在任何網(wǎng)站上使用。但是，某些網(wǎng)站可能已實(shí)施安全措施以阻止書(shū)簽小程序工作。此外，書(shū)簽小程序的功能可能取決于其所用網(wǎng)站的結(jié)構(gòu)。

為什么我的書(shū)簽小程序不起作用？

您的書(shū)簽小程序不起作用可能有幾個(gè)原因。您嘗試在其上使用它們的網(wǎng)站可能已實(shí)施安全措施以阻止書(shū)簽小程序工作。書(shū)簽小程序中的代碼可能已過(guò)期或與網(wǎng)站不兼容。或者代碼本身可能存在錯(cuò)誤。

如何調(diào)試書(shū)簽小程序？

調(diào)試書(shū)簽小程序可能有點(diǎn)棘手，因?yàn)樗鼈儧](méi)有傳統(tǒng)的調(diào)試環(huán)境。但是，您可以使用瀏覽器的開(kāi)發(fā)者工具來(lái)檢查代碼并查看任何錯(cuò)誤消息。您還可以嘗試在瀏覽器的控制臺(tái)中運(yùn)行代碼，看看它是否在那里工作。

我可以在移動(dòng)設(shè)備上使用書(shū)簽小程序嗎？

是的，您可以在移動(dòng)設(shè)備上使用書(shū)簽小程序。但是，添加和使用它們的過(guò)程可能比在桌面瀏覽器上更復(fù)雜。您可能需要手動(dòng)將 JavaScript 代碼輸入書(shū)簽，因?yàn)橐苿?dòng)瀏覽器通常不支持桌面瀏覽器上使用的拖放方法。

我可以與他人共享書(shū)簽小程序嗎？

是的，您可以與他人共享書(shū)簽小程序。只需向他們發(fā)送 JavaScript 代碼以及有關(guān)如何將其添加到其書(shū)簽的說(shuō)明即可。但是，請(qǐng)記住，只共享來(lái)自可信來(lái)源的書(shū)簽小程序，并且您了解代碼的功能。

我可以使用書(shū)簽小程序來(lái)更改網(wǎng)站的外觀嗎？

是的，您可以使用書(shū)簽小程序來(lái)更改網(wǎng)站的外觀。這是通過(guò)操作網(wǎng)站的 CSS 來(lái)完成的。但是，這些更改只是臨時(shí)的，刷新頁(yè)面后將丟失。

我可以使用書(shū)簽小程序來(lái)自動(dòng)執(zhí)行網(wǎng)站上的任務(wù)嗎？

是的，您可以使用書(shū)簽小程序來(lái)自動(dòng)執(zhí)行網(wǎng)站上的任務(wù)。這可以是任何事情，從填寫(xiě)表單到單擊按鈕。但是，書(shū)簽小程序的功能將取決于網(wǎng)站的結(jié)構(gòu)和您要自動(dòng)執(zhí)行的任務(wù)。

以上是通過(guò)書(shū)簽更好的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！