はじめに
InternetExplorer(以下IE)におけるブックマークレットの作り方と個人的にハマったところをまとめてみました。
2009.10.12追記
少し説明を加筆し、表現を直しました。
ブックマークレットの作り方
スクリプトを実行するためのインターネットショートカットを作成する
ブックマークレットはその名のとおり、IEのお気に入りに登録して利用します。そのため、IEのお気に入りが格納されているC:\Documents and Settings\xxx\Favorites配下に新しいインターネットショートカットを作成します。(xxx.urlというファイル)
以下は、hogeという文字列をアラートするブックマークレットです。
hoge.url
[InternetShortcut] URL=javascript:(function(){alert("hoge");})();
作成時のポイント
ほとんどのことはhttp://www.teria.com/~koseki/memo/bookmarklets/tips.htmlに記載されていますので、そちらを参考にすると良いと思います。押さえておくべきポイントは、以下の3点です。
- 値は返さない
- 変数を汚染しない
- 文字数制限に注意する
ブックマークレットの文字数制限
ブックマークレットに使用できるスクリプトには、ブラウザごとに文字数の制限があります。以下のサイトによると、IE6ではわずか500文字弱しか許可されていないことが分かります。
文字数制限の回避方法
上記のようなブラウザごとに文字数の制限があるため、500文字以上のスクリプトをIEで実行する場合は、以下のような手法を用います。
- ブックマークレットから外部のサーバに配置されたjsファイルを動的に読み込んで実行する
javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://example.com/example.js";document.body.appendChild(s)})();
これにより、文字数の制限を回避することができます。
createElementでscript要素を作って、その中にhttp://example.com/example.jsとソースを指定することによってそのJSを実行できる。WinIEとFirefoxでは確認済み。もちろんcharsetを指定することにより好きなエンコーディングでブックマークレットを記述できる。これがすげー便利で、サーバ上のjsファイルを編集してこのブックマークレットを実行することで簡単にデバッグもできるし、機能追加などもjsに追加すればいいだけ。ただ問題となるのが、通常のブラウザの場合、サーバにリファラを送ってしまうこと。どのページでブックマークレットを実行したかが解ってしまう。それがブックマークレット利用者で嫌な人は、リンク先のJSを自分のサーバに落としたりなどが必要になる。
bookmarkletの文字数制限を無くす - 川o・-・)<2nd life
ローカルjsを読み込むことができなくなったIE7
javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://example.com/example.js";document.body.appendChild(s)})();
IE6では、s.src属性にローカルファイルd:\\hoge.jsのように指定しても読み込むことができていましたが、IE7では、これがエラーになるようになっています。したがって、読み込むjsファイルは、上記のように外部のサーバかローカルのWebサーバ上などに配置する必要があります。
IE6だとimgのsrcにローカルファイルを指定(img src="file://〜")できたのですが、IE7だと指定できなくなってました。
あと、IE6で使えなかったdataスキームは、IE7でも引き続きつかえませんでした。
IE7は imgのsrcにローカルファイルを指定できないし、dataスキームも使えない - Enjoy*Study