通過書籤更好

核心要點

• 書籤小程序是嵌入瀏覽器書籤中的小型 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中文網其他相關文章！