[转] Bookmarklet（书签工具）编写指南
為什么80%的碼農都做不了架構師？>>> ??
作者：?阮一峰
日期：?2011年6月11日
前一段日子，我寫了兩個Bookmarklet----"短網址生成"和"短網址還原"。
它們用起來很方便，除了我本人之外，其他朋友也在用。第一次發布Bookmarklet，就能有用戶，我挺滿意的。
下面就是我整理的《Bookmarklet編寫指南》，供自己和需要的朋友參考。
====================================================
Bookmarklet編寫指南
阮一峰 編寫
一、什么是Bookmarklet？
Bookmarklet是一個復合詞，由Bookmark（書簽）和-let（小的）構成，中文可以譯成"書簽工具"。
它在形式上與"書簽"一樣，都保存在瀏覽器收藏夾里。但是，它不是一個以"http://"開頭的網址，而是一段Javascript代碼，以"javascript:"開頭。點擊之后，會對當前頁面執行某種操作。
它通常在網頁中以鏈接的形式出現，就像下面這樣：
<a href="javascript:alert('hi');">xxx</a>
用戶直接把這個鏈接拖到地址欄或收藏夾就可以用了。
二、Bookmarklet的優點
它有幾個很顯著的優點，其他技術難以取代：
1. 安裝快速
Bookmarklet的安裝，就是在收藏夾中保存一段代碼，一步就能完成。所有瀏覽器都原生支持。
2. 使用方便
用的時候，點一下這個鏈接就行了。
3. 開發容易
一段Javascript代碼就是Bookmarklet的所有內容，不需要用到其他技術，比開發一個瀏覽器插件簡單多了。
4. 跨瀏覽器
所有瀏覽器都支持Bookmarklet。如果寫的正確，同樣一個Bookmarklet在各種瀏覽器上都能正常使用。
三、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。
四、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.οnlοad=foo;
document.body.appendChild(script);
} else {
foo();
}?
function foo() {
/* ... */
}
五、延伸閱讀
* 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
（完）
轉載于:https://my.oschina.net/pandao/blog/107685
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的[转] Bookmarklet（书签工具）编写指南的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： xAI迎战OpenAI｜没有什么能够阻挡
- 下一篇： FastJson简单应用