スポンサーサイト
投稿日時 : -------- --:--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
-------- --:-- | スポンサー広告
カーソル直下のソースをポップアップ表示するブックマークレット
投稿日時 : 2008-01-15 15:05
onMouseSourceViewerDemo
 
 
改良版を公開しました(2008/06/23):
カーソル直下のソースを表示するブックマークレット(改)

 
 
カーソル直下にあるオブジェクトを取得して、その前後のソースをポップアップ表示させるブックマークレットです。IE独自のelementFromPoint(x,y)を使っているので基本的にIEでしか動作しません。最近のOperaは一応elementFromPoint(x,y)が実装されたようですが、どうも動作が怪しいのでサポート外。
 
ウィンドウの端でポップアップフレームが見えなくなったら意味がないので、がんばって回り込み機能をつけました。まあその回り込み処理と見栄えにこだわったせいで508文字というブックマークレットの文字数制限に悩まされました。変数もグローバルで宣言されているので、ページ本体のスクリプトと干渉するかもしれません。文字数を減らすために削って動くものはすべて削っています。それと横スクロールが出た状態を想定していません。
 

■動作環境

  • IE5.5+
  • フレームページ不可
  • このページのようにスタイルシートで段組が作成されている場合elementFromPoint(x,y)がうまく動作しないみたいで、取得するオブジェクトが見当違いなものになったり、表示位置がおかしくなったりします。テーブルでレイアウトが構成されているようなレガシーなページだとうまく動作します(Googleの検索結果ページなど)。
508文字ではこのあたりが限界かと。
 
使用にあたっては自己責任でお願いします。
このスクリプトによって発生したいかなる損害も作者は責任を負いません。

 

■ブックマークレット本体

*このページではうまく動作しません。
動作確認はGoogleあたりでお願いします。
 

■整形済みソース全文

javascript:
(function(){
  d=document;
  b=d.body;

  //scrollTopが動作するか判定
  b.scrollTop++;
  b.scrollTop?E=b:E=d.documentElement;

  //ポップアップフレーム生成(正しいHTMLではない)
  b.innerHTML+='<div id=F style=position:absolute;left:0;
  top:0;width:300;word-break:break-all;background-color:000;
  color:fff;font-size:11;z-index:99999999/>';

  //マウスイベント補足
  d.onmousemove=function(){
    //現在座標
    x=event.x;
    y=event.y;

    //現在座標下のオブジェクト取得
    o=d.elementFromPoint(x,y);

    //ポップアップフレームの初期Y座標決定
    T=E.scrollTop;
    y+=T;
    
    //ポップアップフレームの横幅
    w=300;
    
    //表示文字数を切り詰めてポップアップフレームに書き込み
    F.innerText=o.outerHTML.slice(0,w*3);

    //ポップアップフレームのサイズに応じて回り込み処理
    h=F.offsetHeight;
    x+w>E.clientWidth?X=x-w-9:X=x+9;
    F.style.left=X;
    y+h-T>E.clientHeight?Y=y-h:Y=y;
    Y<T?Y+=T-Y:Y;
    F.style.top=Y
  }
}())
*実際は1行のコードにしないと動作しません。
 

■設定変更

ポップアップフレームの横幅を変更
    //ポップアップフレームの横幅
    w=300;
「w=300;」 の部分を1~999の3文字以内で指定する。
 
最大表示文字数を変更
    //表示文字数を切り詰めてポップアップフレームに書き込み
    F.innerText=o.outerHTML.slice(0,w*3);
「F.innerText=o.outerHTML.slice(0,w*3);」 の「3」を1~9の1文字の整数で指定するか、「w*3」を1~999の3文字以内の整数に書き換える。
 
スポンサーサイト
2008-01-15 15:05 | Bookmarklet | Comment(0) | Trackback(0)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。