核心要點(diǎn)

• 書簽小程序是嵌入瀏覽器書簽中的小型 JavaScript 代碼，可增強(qiáng) Web 瀏覽器的功能并簡化 Web 開發(fā)人員的工作流程。
• 書簽小程序的用途范圍很廣，從簡單的導(dǎo)航任務(wù)到更復(fù)雜的操作，例如修改頁面內(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覽器重定向到其他站點(diǎn)。如果您以前從未嘗試過使用書簽小程序，建議您在閱讀本文的其余部分之前先嘗試一下。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)重限制了該瀏覽器可用的書簽小程序范圍，盡管我稍后將介紹的技術(shù)確實提供了一種部分補(bǔ)救方法。為了充分利用書簽小程序，我建議您使用基于 Mozilla 的瀏覽器，例如優(yōu)秀的 Firefox，它還附帶許多有用的工具來幫助書簽小程序的開發(fā)。然而，書簽小程序開發(fā)的魅力之一在于，經(jīng)常困擾嚴(yán)重 JavaScript 開發(fā)的跨瀏覽器問題可以避免：為特定瀏覽器開發(fā)書簽小程序（尤其是個人使用的書簽小程序）沒有任何問題，因此開發(fā)人員實際上可以做任何瀏覽器允許他們做的事情。

常見的書簽小程序變體

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

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

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

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

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

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

如果您對站點(diǎn)上使用的內(nèi)容管理系統(tǒng)有一定的控制權(quán)，則可以極大地擴(kuò)展此概念。例如，在一個未在 URL 中公開文章內(nèi)部 ID 的站點(diǎn)中，您可以改為在 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() 框更復(fù)雜的用戶界面時。

輔助文本輸入

我在網(wǎng)上花費(fèi)大量時間盯著 textarea 框。我更新的三個博客都是通過 textarea 維護(hù)的，我的工作中開發(fā)的站點(diǎn)和參與的各種在線論壇也是如此。Textarea 無處不在。它們也是一種遠(yuǎn)非最佳的處理文本的方式，尤其是在與專用的文本編輯器軟件相比時。書簽小程序可以使處理 textarea 明顯不那么痛苦，并且可以為它們提供有用的附加功能。我最喜歡的 textarea 增強(qiáng)書簽小程序示例是來自 Jesse Ruderman 的另一個：Blogidate XML 良構(gòu)性——一個 Mozilla/FireFox 書簽小程序，它檢查頁面上每個 textarea 中的文本是否為良構(gòu) XML 并相應(yīng)地更改 textarea 的背景顏色。這對于在將 XHTML 發(fā)布到站點(diǎn)之前捕獲 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)航書簽小程序更復(fù)雜的內(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)的更復(fù)雜書簽小程序的有用技術(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 個字符。此代碼有一個缺點(diǎn)：它不適用于 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)前頁面上運(yùn)行，而不是加載新頁面。這允許您向網(wǎng)站添加新功能、自動化重復(fù)性任務(wù)甚至玩游戲，而無需安裝任何軟件或擴(kuò)展程序。

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

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

書簽小程序安全嗎？

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

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

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

為什么我的書簽小程序不起作用？

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

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

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

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

是的，您可以在移動設(shè)備上使用書簽小程序。但是，添加和使用它們的過程可能比在桌面瀏覽器上更復(fù)雜。您可能需要手動將 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)文章！