[轉] Bookmarklet（書籤工具）編寫指南

做者： 阮一峯

日期： 2011年6月11日

前一段日子，我寫了兩個Bookmarklet----"短網址生成"和"短網址還原"。

它們用起來很方便，除了我本人以外，其餘朋友也在用。第一次發佈Bookmarklet，就能有用戶，我挺滿意的。

下面就是我整理的《Bookmarklet編寫指南》，供本身和須要的朋友參考。

====================================================

Bookmarklet編寫指南

阮一峯 編寫

1、什麼是Bookmarklet？

Bookmarklet是一個複合詞，由Bookmark（書籤）和-let（小的）構成，中文能夠譯成"書籤工具"。

它在形式上與"書籤"同樣，都保存在瀏覽器收藏夾裏。可是，它不是一個以"http://"開頭的網址，而是一段Javascript代碼，以"javascript:"開頭。點擊以後，會對當前頁面執行某種操做。

它一般在網頁中以連接的形式出現，就像下面這樣：

　　<a href="javascript:alert('hi');">xxx</a>

用戶直接把這個連接拖到地址欄或收藏夾就能夠用了。

2、Bookmarklet的優勢

它有幾個很顯著的優勢，其餘技術難以取代：

1. 安裝快速

　　Bookmarklet的安裝，就是在收藏夾中保存一段代碼，一步就能完成。全部瀏覽器都原生支持。

2. 使用方便

　　用的時候，點一下這個連接就好了。

3. 開發容易

　　一段Javascript代碼就是Bookmarklet的全部內容，不須要用到其餘技術，比開發一個瀏覽器插件簡單多了。

4. 跨瀏覽器

　　全部瀏覽器都支持Bookmarklet。若是寫的正確，一樣一個Bookmarklet在各類瀏覽器上都能正常使用。

3、Bookmarklet的編寫規則

1. 必須以"javascript:"開頭

瀏覽器把"javascript:"當作協議看待。有了它，瀏覽器才知道要用javascript解釋後面的代碼。它的做用等同於將代碼放在<script></script>之間運行。

2. 全部代碼必須在同一行

由於瀏覽器把Bookmarklet當作網址保存，而網址是不能分行的，因此Bookmarklet也不能分行。

另外一方面，網址是有長度限制的。IE的最長網址不能超過2083個字符（IE6不能超過508個字符），這也就是Bookmarklet的最長長度。壓縮工具能夠幫忙減小長度，可是使用下面提到的鏈接外部代碼的方法，能夠避開這個限制。

3. 使用單引號

根據Javascript的語法，單引號（'xxx'）和雙引號（"xxx"）都能使用。可是因爲html語言主要使用雙引號，因此Bookmarklet優先使用單引號。萬一遇到必須使用雙引號的狀況，就採用它的URL編碼形式"%22"。

4. 不要污染全局變量

Bookmarklet最好不要生成新的全局變量，能夠採用直接運行匿名函數的方式：

　　javascript: (function(){...})();

上面式子的第一個括號，定義了一個匿名函數；最後一個括號表示當即執行這個匿名函數。全部的變量都是匿名函數的內部變量，不會生成任何新的全局變量。

若是必須設置全局變量，就取罕見的變量名（好比hd8ki2），防止與已經存在的全局變量同名。

5. 對文本和URL進行編碼

爲了防止出現非法字符，代碼之外的文本都應該使用encodeURIComponent()函數進行編碼，好比把空格變成%20。

4、Bookmarklet的編寫技巧

1. 獲取網頁信息

獲取當前頁面的標題：document.title。

獲取當前頁面的URL： location.href。

獲取當前選中的文本：

　　var t;

　　t = (function(){

　　　　if (window.getSelection){

　　　　　　return window.getSelection().toString();

　　　　}else if(document.getSelection){

　　　　　　return document.getSelection();

　　　　}else if (document.selection){

　　　　　　return document.selection.createRange().text;

　　　　}

　　　　return '';

　　})();

2. 防止刷新頁面

若是代碼對頁面有改動（好比使用了document.write），瀏覽器就會用一個新頁面替換原有頁面。因此最好用void()命令，把語句放在裏面。

舉例來講，下面這個Bookmarklet會致使原頁面被一個新頁面替代：

　　javascript:document.links[0].href='http://www.ibm.com/';

加上void之後，頁面就不會跳轉了：

　　javascript:void(document.links[0].href='http://www.ibm.com/');

3. 框架（frameset）

對於使用"框架"（frameset）的網頁，那些須要操做頁面的Bookmarklet通常不起做用。因此，若是發現網頁使用了框架，就告訴用戶Bookmarklet沒法使用。

　　if(frames.length > 0)

　　　　alert('對不起，不適用於框架。');

　　else{

　　　　/* 正常狀況的代碼 */

　　}

可是，上面的代碼有一個問題，那就是行內框架iframe也包含在frames.length之中，因此必須排除iframe的影響。

　　if(frames.length > 
　　　document.getElementsByTagName('iframe').length)

　　　　alert('對不起，不適用於框架。');

　　else{

　　　　/* 正常狀況的代碼 */

　　}

4. 鏈接外部javascript代碼

有時，Bookmarklet必須再引入外部的Javascript代碼，這就須要爲當前頁面添加一個script標籤。

　　javascript:(function(){

　　　　var script=document.createElement('script');

　　　　script.setAttribute('src',
　　　　　　　　　　　　'http://path/to/external/file.js');

　　　　document.getElementsByTagName('head')[0]
　　　　　　　　.appendChild(script);

　　})();

5. 添加外部函數庫

若是Bookmarklet須要用到外部函數庫，就必須把它也加進來。可是，前提是必須先檢查一下，看看原頁面是否已經加載了這個函數庫。

下面以加載jQuery爲例：

　　if (!window.jQuery) {

　　　　script=document.createElement( 'script' );

　　　　script.src='http://ajax.googleapis.com/
　　　　　　　　　ajax/libs/jquery/1/jquery.min.js';

　　　　script.onload=foo;

　　　　document.body.appendChild(script);

　　} else {

　　　　foo();

　　} 

　　function foo() {

　　　　/* ... */

　　}

5、延伸閱讀

　　* Kalid Azad, How To Make a Bookmarklet For Your Web Application

　　* Troels Jakobsen, Rules for Bookmarklets

　　* Troels Jakobsen, Tips for Writing Bookmarklets

　　* Siddharth, Create Bookmarklets - The Right Way

　　* 2ality, Implementing bookmarklets in JavaScript

（完）