スポンサーサイト
投稿日時 : -------- --:--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
-------- --:-- | スポンサー広告
カーソル直下のソースを表示するブックマークレット(改)
投稿日時 : 2008-06-20 19:21
 以前 カーソル直下のソースをポップアップ表示するブックマークレットを公開しましたが、もとのソース自体は2006年頃に書いたもので、今見直すといろいろひどい。
 
まあ昔のことは気にせず改良版再公開。追記:IE6で動かないことに気づいたので更に修正(2008/06/23)。
 
onMouseSourceViewer demo
 
ブックマークレット本体
onMouseSourceViewer改
*IEとIEコンポーネントブラウザ(Sleipnir等)で動作
 
整形済みソース全文
javascript:(function(){
    d=document;
    b=d.body;
    E=d.compatMode!='CSS1Compat'?b:d.documentElement;
    b.innerHTML+='<p id=F align=left style="position:absolute;z-index:2147483646;word-break:break-all;width:300;background:222;color:e90;font-size:10"/>';
    d.onmousemove=function(){
        x=event.clientX;
        y=event.clientY;
        F.innerText=d.elementFromPoint(x,y).outerHTML.slice(0,1000);
        T=E.scrollTop;
        y+=T;
        h=F.offsetHeight;
        w=300;
        F.style.left=x+w+9>E.clientWidth?x-w-9:x+9;
        F.style.top=(Y=y+h-T>E.clientHeight?y-h:y)<T?Y+=T-Y:Y
    }
})()
色づけした部分は設定変更可能です。
横幅(1-999)
背景色(000-fff)
文字色(000-fff)
フォントサイズ(1-99)
表示文字数の上限(1-9999)
 
注意点は変数がグローバルで宣言されているのでページ本体のスクリプトに干渉するかもしれないということ。
 
以下変更点メモ。
  • 文字数を減らすためにelementFromPointに渡す座標をevent.xとevent.yで取っていたのをevent.clientXとevent.clientYに変更。これでカーソル下エレメントの相対座標を見てしまうことで見当違いなソースを表示してしまっていたのを回避。
  • DOCTYPEによってdocument.body.scrollTopの値が常に0になってしまうので、標準準拠(Standard)モード時はdocument.documentElement.scrollTopを参照しなければならない。このDOCTYPEをdocument.compatModeプロパティを使って確実に判定するようにした。
  • デザイン変更可能な範囲が増えた。
  • 文字数の関係上削っていたz-indexを復活させ、上限値2147483646を設定。これでz-indexが設定されたオブジェクトの下にポップアップフレームが潜ってしまうのを回避(Flashオブジェクトは依然不可)。
 
横スクロール対応版やonomousemoveのattachEvent版も作ってみましたが、やはり文字数の関係で見た目と機能のバランスが悪くなりすぎるので却下。文字数を削るってのはいつもながら大変ですね。
 
スポンサーサイト
2008-06-20 19:21 | Bookmarklet | Comment(0) | Trackback(0)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。