Re2: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く

修正を重ねている「第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く」で作った関数ですが、ようやく完成系になったかもしれません。

今回は画像(IMGタグ)のonloadの扱い方と、ポップアップブロッカーの対策を施しています。

画像サイズと合ったポップアップウィンドウを開く関数

function openImageSizedWindow(src){
    var i = new Image(); 
    i.onload = function() {
        var pop_win = window.open(
                          "",
                          "_blank",
                          "width="+i.width+",height="+i.height+",scrollbars=no,resizable=yes"
                      );
        if ( pop_win ) {
            pop_win.window.document.open();
            pop_win.window.document.write(
             '<html>'
            +'<head><title>'+i.alt+'</title></head>'
            +'<body style="margin:0;padding:0;border:0;">'
            +'<img src="'+i.src+'" width="100%" alt="" />'
            +'</body>'
            +'</html>'
            );
            pop_win.window.document.close();
        } else {
            location.href = i.src;
        }
        i.onload = function(){};
    }
    i.src = src;
}

1)画像のロードの前にonloadイベントハンドラーを仕掛ける

修正前では下記のように画像のロード(srcを指定)した後に、onloadをセットしていました。

i = new Image();                      // 1) create image object
i.src = src;                          // 2) load image
i.onload = function() { /* logic */ } // 3) onload handler

IE7ではこれが問題で動いていなかったようです。
よくよく考えればハンドラーをしかける前にロードが終っていた何もイベントが起こらないですからね。
下記のように並び替え。

i = new Image();                      // 1) create image object
i.onload = function() { /* logic */ } // 2) onload handler
i.src = src;                          // 3) load image

2)ポップアップブロッカーで開けない場合は画面遷移して開く

ブラウザのポップアップブロッカーなどによって別ウィンドウが開けない場合があります。
そんな時に、ポップアップの代わりにその画面に開く様に window.open の返り値を判断して、ポップアップできなかった時は location.href しています。
この件は、別のエントリーに書いていますのでそちらを参照のこと。
JavaScriptのポップアップウィンドウ禁止しているブラウザへの代替処理

3)処理が終ったらハンドラーを無効化する

IE6だけかもしれませんが、何もしなくても何個もwindowが開いてしまう現象が置きました。
画像のonloadが何度も発生するとは思えませんが、対策としてloadが終ったらイベントハンドラーを解除する事にしました。

i.onload = function(){}

これでいいのかは微妙ですが。

サンプル

JSサンプル

ダウンロード

すぐに使えるように外部JS形式で保存しました。

ZIPファイルを展開するとJSファイルが入っていますので、ダウンロードしてご利用ください。
openImageSizedWindow.zip

スクリプトはUTF-8で保存されていますので、そのまま使う場合はscriptタグにcharsetを指定する事をお勧めします。
<script type="text/javascript" src="/path/to/js/openImageSizedWindow.js" charset="UTF-8"></script>

まとめ

まだ、おかしいところあったら教えて下さい・・・

Re: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く
第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く

同じカテゴリーの記事

このページの一番上に戻る
  • Facebook
  • Twitter
  • Tumblr
  • Instagram
  • miil