[转] Bookmarklet（书签工具）编写指南
為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??
作者：?阮一峰
日期：?2011年6月11日
前一段日子，我寫了兩個(gè)Bookmarklet----"短網(wǎng)址生成"和"短網(wǎng)址還原"。
它們用起來很方便，除了我本人之外，其他朋友也在用。第一次發(fā)布Bookmarklet，就能有用戶，我挺滿意的。
下面就是我整理的《Bookmarklet編寫指南》，供自己和需要的朋友參考。
====================================================
Bookmarklet編寫指南
阮一峰 編寫
一、什么是Bookmarklet？
Bookmarklet是一個(gè)復(fù)合詞，由Bookmark（書簽）和-let（小的）構(gòu)成，中文可以譯成"書簽工具"。
它在形式上與"書簽"一樣，都保存在瀏覽器收藏夾里。但是，它不是一個(gè)以"http://"開頭的網(wǎng)址，而是一段Javascript代碼，以"javascript:"開頭。點(diǎn)擊之后，會對當(dāng)前頁面執(zhí)行某種操作。
它通常在網(wǎng)頁中以鏈接的形式出現(xiàn)，就像下面這樣：
<a href="javascript:alert('hi');">xxx</a>
用戶直接把這個(gè)鏈接拖到地址欄或收藏夾就可以用了。
二、Bookmarklet的優(yōu)點(diǎn)
它有幾個(gè)很顯著的優(yōu)點(diǎn)，其他技術(shù)難以取代：
1. 安裝快速
Bookmarklet的安裝，就是在收藏夾中保存一段代碼，一步就能完成。所有瀏覽器都原生支持。
2. 使用方便
用的時(shí)候，點(diǎn)一下這個(gè)鏈接就行了。
3. 開發(fā)容易
一段Javascript代碼就是Bookmarklet的所有內(nèi)容，不需要用到其他技術(shù)，比開發(fā)一個(gè)瀏覽器插件簡單多了。
4. 跨瀏覽器
所有瀏覽器都支持Bookmarklet。如果寫的正確，同樣一個(gè)Bookmarklet在各種瀏覽器上都能正常使用。
三、Bookmarklet的編寫規(guī)則
1. 必須以"javascript:"開頭
瀏覽器把"javascript:"當(dāng)做協(xié)議看待。有了它，瀏覽器才知道要用javascript解釋后面的代碼。它的作用等同于將代碼放在<script></script>之間運(yùn)行。
2. 所有代碼必須在同一行
因?yàn)闉g覽器把Bookmarklet當(dāng)做網(wǎng)址保存，而網(wǎng)址是不能分行的，所以Bookmarklet也不能分行。
另一方面，網(wǎng)址是有長度限制的。IE的最長網(wǎng)址不能超過2083個(gè)字符（IE6不能超過508個(gè)字符），這也就是Bookmarklet的最長長度。壓縮工具可以幫忙減少長度，但是使用下面提到的連接外部代碼的方法，可以避開這個(gè)限制。
3. 使用單引號
根據(jù)Javascript的語法，單引號（'xxx'）和雙引號（"xxx"）都能使用。但是由于html語言主要使用雙引號，所以Bookmarklet優(yōu)先使用單引號。萬一遇到必須使用雙引號的情況，就采用它的URL編碼形式"%22"。
4. 不要污染全局變量
Bookmarklet最好不要生成新的全局變量，可以采用直接運(yùn)行匿名函數(shù)的方式：
javascript: (function(){...})();
上面式子的第一個(gè)括號，定義了一個(gè)匿名函數(shù)；最后一個(gè)括號表示立即執(zhí)行這個(gè)匿名函數(shù)。所有的變量都是匿名函數(shù)的內(nèi)部變量，不會生成任何新的全局變量。
如果必須設(shè)置全局變量，就取罕見的變量名（比如hd8ki2），防止與已經(jīng)存在的全局變量同名。
5. 對文本和URL進(jìn)行編碼
為了防止出現(xiàn)非法字符，代碼以外的文本都應(yīng)該使用encodeURIComponent()函數(shù)進(jìn)行編碼，比如把空格變成%20。
四、Bookmarklet的編寫技巧
1. 獲取網(wǎng)頁信息
獲取當(dāng)前頁面的標(biāo)題：document.title。
獲取當(dāng)前頁面的URL： location.href。
獲取當(dāng)前選中的文本：
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），瀏覽器就會用一個(gè)新頁面替換原有頁面。所以最好用void()命令，把語句放在里面。
舉例來說，下面這個(gè)Bookmarklet會導(dǎo)致原頁面被一個(gè)新頁面替代：
javascript:document.links[0].href='http://www.ibm.com/';
加上void以后，頁面就不會跳轉(zhuǎn)了：
javascript:void(document.links[0].href='http://www.ibm.com/');
3. 框架（frameset）
對于使用"框架"（frameset）的網(wǎng)頁，那些需要操作頁面的Bookmarklet一般不起作用。所以，如果發(fā)現(xiàn)網(wǎng)頁使用了框架，就告訴用戶Bookmarklet無法使用。
if(frames.length > 0)
alert('對不起，不適用于框架。');
else{
/* 正常情況的代碼 */
}
但是，上面的代碼有一個(gè)問題，那就是行內(nèi)框架iframe也包含在frames.length之中，所以必須排除iframe的影響。
if(frames.length >?
document.getElementsByTagName('iframe').length)
alert('對不起，不適用于框架。');
else{
/* 正常情況的代碼 */
}
4. 連接外部javascript代碼
有時(shí)，Bookmarklet必須再引入外部的Javascript代碼，這就需要為當(dāng)前頁面添加一個(gè)script標(biāo)簽。
javascript:(function(){
var script=document.createElement('script');
script.setAttribute('src',
'http://path/to/external/file.js');
document.getElementsByTagName('head')[0]
.appendChild(script);
})();
5. 添加外部函數(shù)庫
如果Bookmarklet需要用到外部函數(shù)庫，就必須把它也加進(jìn)來。但是，前提是必須先檢查一下，看看原頁面是否已經(jīng)加載了這個(gè)函數(shù)庫。
下面以加載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
（完）
轉(zhuǎn)載于:https://my.oschina.net/pandao/blog/107685
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的[转] Bookmarklet（书签工具）编写指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： xAI迎战OpenAI｜没有什么能够阻挡
- 下一篇： FastJson简单应用