核心要點

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

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

常見的書籤小程序變體

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

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

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

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

上述站點的“編輯此頁面”書籤小程序可以這樣實現(xiàn)：

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

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

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

瀏覽器應(yīng)該顯示字符串中呈現(xiàn)的 HTML。它這樣做是因為該字符串被評估為表達(dá)式，其結(jié)果然後顯示在當(dāng)前瀏覽器窗口中。同樣的技巧甚至可以用來將您的瀏覽器變成一個過於指定的計算器：

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

有時編寫以這種方式嵌入整個頁面的書籤小程序可能很有用，尤其是在它們需要比簡單的 confirm() 和 prompt() 框更複雜的用戶界面時。

輔助文本輸入

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

1. 通過空行彼此分隔的文本塊用段落標(biāo)記包裝
2. 以 = 符號開頭的行轉(zhuǎn)換為 #### 標(biāo)題
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。此版本犧牲了標(biāo)題支持以適應(yīng) 508 個字符的限制：擴(kuò)展 HTML 簡寫 IE。擴(kuò)展 HTML 簡寫：

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

擴(kuò)展 HTML 簡寫 IE：

javascript:1 + 4;

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

<code>= Header

Paragraph

* list 1
* list 2</code>

書籤小程序創(chuàng)建工具

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

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

避免變量作用域衝突

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

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

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

追加更長的腳本

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

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

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

進(jìn)一步閱讀

了解書籤小程序的最佳方法是查看其他人編寫的書籤小程序：

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

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

關(guān)於書籤小程序的常見問題解答

書籤小程序是什麼？它們是如何工作的？

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

如何創(chuàng)建書籤小程序？

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

書籤小程序安全嗎？

書籤小程序通常安全可靠，因為它們在您的瀏覽器中運行，並且無法訪問您計算機(jī)的文件系統(tǒng)。但是，與任何代碼一樣，它們也可能被惡意使用。務(wù)必僅使用來自可信來源的書籤小程序，並在使用之前了解代碼的功能。

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

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

為什麼我的書籤小程序不起作用？

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

如何調(diào)試書籤小程序？

調(diào)試書籤小程序可能有點棘手，因為它們沒有傳統(tǒng)的調(diào)試環(huán)境。但是，您可以使用瀏覽器的開發(fā)者工具來檢查代碼並查看任何錯誤消息。您還可以嘗試在瀏覽器的控制臺中運行代碼，看看它是否在那里工作。

我可以在移動設(shè)備上使用書籤小程序嗎？

是的，您可以在移動設(shè)備上使用書籤小程序。但是，添加和使用它們的過程可能比在桌面瀏覽器上更複雜。您可能需要手動將 JavaScript 代碼輸入書籤，因為移動瀏覽器通常不支持桌面瀏覽器上使用的拖放方法。

我可以與他人共享書籤小程序嗎？

是的，您可以與他人共享書籤小程序。只需向他們發(fā)送 JavaScript 代碼以及有關(guān)如何將其添加到其書籤的說明即可。但是，請記住，隻共享來自可信來源的書籤小程序，並且您了解代碼的功能。

我可以使用書籤小程序來更改網(wǎng)站的外觀嗎？

是的，您可以使用書籤小程序來更改網(wǎng)站的外觀。這是通過操作網(wǎng)站的 CSS 來完成的。但是，這些更改只是臨時的，刷新頁面後將丟失。

我可以使用書籤小程序來自動執(zhí)行網(wǎng)站上的任務(wù)嗎？

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

以上是通過書籤更好的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！