ブックマークレットはグローバル空間で実行される
即時関数で囲む
ブックマークレットのコードはグローバル空間で実行されるので、サイトの空間とかぶってしまします。
名前がバッティングしないように即時関数内にコードを記述しましょう
上述の記事にある通りなのですが、Bookmarkletを作る際は以下のように(function(){と})()に囲まれた即時関数で記述しなければなりません。
javascript:(function(){
alert("hello world");
Console.log("hello world");
})();
しかし、ただAlertを出すだけなら、即時関数にしなくても動きます。
※ 下記のコードをBookmarkletにしても同じように動きます。
ネットで公開されている記事でも、即時関数になっていないものもけっこうありました。
javascript:
alert("hello world");
Console.log("hello world");
即時関数でないと困るケース
DOM操作をして変数の値を変えよう、などという場合に即時関数でなければおかしな挙動になります。
例えば、inputareaのvalueを書き換えたいと思った場合、以下のBookmarkletを実行すると画面が真っ白になります。
※ ブラウザのデバッグモード: コンソールで実行すると問題なく動きます。
/*Bookmarkletでは動かない*/
javascript:
var elements = document.querySelectorAll('textarea');
for(var i = 0; i < elements.length; i++){
elements[i].value = 'hoge';
}
このような場合は即時関数でなければ思ったとおり動いてくれないです。
(グローバル空間で実行された結果おかしなことになっているのだと思います)
/*Bookmarkletで動く*/
javascript:
(function(){
var elements = document.querySelectorAll('textarea');
for(var i = 0; i < elements.length; i++){
elements[i].value = 'hoge';
}
}())
実行結果
■ 即時関数ではない版
■ 即時関数版
即時関数でなくても動くケースもありますが動かないケースも多々あるので、Bookmarkletは即時関数で実装しましょう。
※ ちなみにですが、inputタグのvalueを書き換える場合は即時関数でなくても問題なく動きました。
この結果めっちゃハマってしまったんですよね。。。