Bookmarklet编写指南

作者: 阮一峰

日期: 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.onload=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

(完)

留言(24条)

大多数浏览器接受的最长网址,都在2000个字符左右,只有IE6是488字符或508字符。

不赞成这个,好像除了IE,所有其他浏览器都支持至少8000个以上字符的URL,我是做过试验的。有的版本Apache服务器默认也只是支持8000长度的URL。

给出一个链接 http://www.boutell.com/newfaq/misc/urllength.html
2000字符只是IE的限制。

昨天就在折腾如何在textarea中选中位置插入内容的js脚本。

最后的做法是:
为textarea绑定一个focus事件;当想要往textarea插入内容时,
让textarea获得焦点;textarea获得焦点后执行我定义的事件,然后就可以在
textarea中光标处插入内容了。

这里面多了一个过渡: 先让textarea获得焦点,然后在里面计算它的位置,增加新内容。
(说的是大概,实际上ie和其他浏览器有不同的解释行为)

要是昨天就来看阮先生的blog,我就少了些折腾。

去年的时候,我就搞了个这样的东西:天涯帖子脱水。

专门针对天涯,只看楼主。可惜东西搞了出来后,
因为担心bookmarklet到底有多少人会真的用。
就放弃了。(我自己很反感不断点击书签)

当然,我的担心本身也是由于这个功能的特殊性。
它必须每次加载页面后都要点击一下,才能处理。

这两天又搞了个雏形出来,换了个形式。采用了google
chrome的扩展。

这样子话,就能在页面跳转时,不用用户点,就能自动记忆,
自动处理了。

以前就知道你的blog,最近重新阅读了不少。

能否提个小建议:即翻译的文章,在旁边加个浮动的按钮,可以在中英对照和只看中文/只看英文之间切换。技术上应该很简单才对。

间断的阅读体验让我感觉很奇怪。

引用牛二弟弟的发言:

去年的时候,我就搞了个这样的东西:天涯帖子脱水。

GreaseMonkey 脚本比较适合。

引用hyh的发言:

能否提个小建议:即翻译的文章,在旁边加个浮动的按钮,可以在中英对照和只看中文/只看英文之间切换。技术上应该很简单才对。

所有页面有统一模板,实现中英文切换,技术上可能比较麻烦。

我是每一段对着英文翻译中文的,所以才会是现在这种格式。

引用sokoban的发言:

好像除了IE,所有其他浏览器都支持至少8000个以上字符的URL,我是做过试验的。

谢谢指出,已经修改原文了。确实只有IE规定URL最长2000个字符左右。

纠正个小错误

"2. 防止刷新页面"

document.write 会替换掉原来的页面是这个函数本来的作用,不是因为这个函数会修改页面(对页面进行修改不会使浏览器擦掉旧页面)。浏览器用新页面替换原有页面仅当那段javascript的返回值不是undefined的时候才会发生,页面将会被替换为那段javascript运行的返回值。

void()唯一作用是抛弃里面的返回值,返回undefined。如果用匿名函数的形式(function(){...})();一般不会放返回值,就没必要用void()了。另外直接在脚本最后加一个undefined; 也有同样的作用。


"3. 使用单引号/5. 对文本和URL进行编码"

现在的主流浏览器(包括IE8)对于URL里的符号和编码基本没有限制了,随便怎么用都可以。


另外关于代码的长度,IE有较大的限制,但Chrome, Safari和FF几乎是无限的,我试过超过20K长度的bookmarklet.

其实Bookmarklet在桌面浏览器用处不大,毕竟有UserScript和插件可以用。不过在移动浏览器(iPad的Safari、Android的浏览器)上不失为一个不错的增强/修改特定页面的好工具。
我就做了一个iPad看在线漫画的小工具:
http://yujianrong.bitbucket.org/JsTool/iPadMangaReader/index.html

引用牛二弟弟的发言:

去年的时候,我就搞了个这样的东西:天涯帖子脱水。

专门针对天涯,只看楼主。可惜东西搞了出来后,
因为担心bookmarklet到底有多少人会真的用。
就放弃了。(我自己很反感不断点击书签)

当然,我的担心本身也是由于这个功能的特殊性。
它必须每次加载页面后都要点击一下,才能处理。

这两天又搞了个雏形出来,换了个形式。采用了google
chrome的扩展。

这样子话,就能在页面跳转时,不用用户点,就能自动记忆,
自动处理了。

如果“天涯帖子脱水”能和Safari的“阅读器”(fx有类似插件)结合起来就好了,翻页也免了。

一直很欣赏阮先生的解构技术的能力。憧憬着android、ios平台的入门开发博文。 不知道阮先生是否有计划做系列的不同平台或语言的开发指南短篇。 或者征稿,让更多人能够通过这个平台参与进来? 谢谢

引用阮一峰的发言:

所有页面有统一模板,实现中英文切换,技术上可能比较麻烦。
我是每一段对着英文翻译中文的,所以才会是现在这种格式。

翻译的文章在相应位置给出原文或链接即可

个人感觉类似功能用浏览器插件来做更为合适

只是略显折腾了一些

void哪个 我以前的做法是结尾加一句undefined 就不会导致页面转向了

因为比void使用的字符多 现在基本使用void 0


href="javascript:alert('');void 0"

0的占位是必须的,但不是必须是0(挺绕的),这样不用计算个很大的括号

引用sokoban的发言:

好像除了IE,所有其他浏览器都支持至少8000个以上字符的URL,我是做过试验的。有的版本Apache服务器默认也只是支持8000长度的URL。

IE6,7准确的说是2083个字吧,另外IE6也是2083,IE8略有不同长一些

我没看懂 Bookmarklet 是做什么的,请问能举个例子描述么?谢谢

bookmarklet 其实分行写没问题

另外有些 webkit 浏览器不允许脚本修改 head 内容,所以document.getElementsByTagName('head')[0].appendChild(script);
要改为
document.body.appendChild(script);

以后可以写个chrome扩展应用的教程:)

阮哥如此强大.学习了.

一直想在kindle的浏览器里添加bookmarklet。

博主:bookmarklet 能访问 https website 吗,我在开发一个bookmarklet,但是在HTTPS站点下不能用,HTTP站点是可以的,

引用牛二弟弟的发言:

昨天就在折腾如何在textarea中选中位置插入内容的js脚本。

您这方法太麻烦了……

看看我的实现 —— http://fyscu.com/forum.php?mod=viewthread&tid=3677&page=1#pid57685

用“递归 + try/catch”方法 可以遍历网页框架(页面中所有的 frame/iframe) ——

http://fyscu.com/forum.php?mod=viewthread&tid=3677&page=1#pid57685

用动态映射可以记录各种属性 ,然后其它的有默认值处理兼容性

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接