Bookmarkletを作ってみた

私は普段、FirefoxとChromeでアンカーテキストを生成するBookmarkletを使っているんですが、試しにIE8にそのBookmarkletを追加して使用してみたらダイアログをブラウザがブロックしちゃうんですね。

そのためだけにそのブロックを解除するのも気が進まない。

普段使っているBookmarklet

javascript:(function(){function%20o(s){prompt('',s)}o('<a href="'+location.href+'" title="'+document.title+'">'+document.title+'</a>');})();

私的にはこれで十分なのだが敢えて、IEでも使えるBookmarkletを作ってみた。

テキストリンクを生成し表示するBookmarklet

javascript:(function(){function a(x,y){x.appendChild(y)}function y(a,b,c,d){with(a.style){color=b;fontSize="16px";background=c;border="1px solid #"+d}}var D=document,i="dlg__",s=c("div"),t=c("input"),b=c("input"),l=D.title,n="20px";if(D.getElementById(i)){return}function r(){D.body.removeChild(D.getElementById(i))}function c(x){return D.createElement(x)}s.id=i;y(s,"#000","#eee","ccc");with(s.style){position="fixed";zIndex="9999";top=n;left=n;textAlign="center";padding=n}with(t){type="text";readOnly=true;value='<a href="'+window.location+'" title="'+l+'">'+l+"</a>";style.width="200px";onclick=function(){this.select()};onkeydown=function(e){var k=e?e.which:event.keyCode;if(k==27||k==13){r()}}}y(t,"#333","#fff","999");b.type="button";b.value="close";y(b,"#eee","#999","666");b.style.marginTop="10px";b.onclick=function(e){r();e?e.stopPropagation():event.cancelBubble=true};a(s,t);a(s,c("br"));a(s,b);a(D.body,s);t.select()})();

たかがBookmarkletなのだが、Closeボタンを設置し、テキストボックスがFocusされるとテキストを選択状態にする。
その他、テキストボックスにフォーカスがある状態でEnterキーかEscキーを押下すると表示されたダイアログもどきが消えるようにしてある。

[Ctrl]+[C]を押してテキストをコピーした後、すぐに[Enter]を押してダイアログもどきを消す流れがイイ感じだと思ったんで実装してみた。


動作確認はIE8,Chrome,Firefox3で行ったが、IEだとGoogle系のページでは何故か意図した場所に表示されないことがあった。

問題としては該当のページに要素を追加することになるのでそのサイトのJavascriptを許可していないとダイアログもどきを閉じることが出来ないということ。

このBookmarkletの総文字数は933文字なので、古いIEだと508文字以上の場合正しく動作しないらしいので対象外となってしまいました。

まあ、そんな古いブラウザ使ってる人がBookmarkletに興味を示すとも思えんが...