修正を重ねている「第３回：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;
}
１）画像のロードの前に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
２）ポップアップブロッカーで開けない場合は画面遷移して開く
ブラウザのポップアップブロッカーなどによって別ウィンドウが開けない場合があります。
そんな時に、ポップアップの代わりにその画面に開く様に window.open の返り値を判断して、ポップアップできなかった時は location.href しています。
この件は、別のエントリーに書いていますのでそちらを参照のこと。
・JavaScriptのポップアップウィンドウ禁止しているブラウザへの代替処理
３）処理が終ったらハンドラーを無効化する
IE6だけかもしれませんが、何もしなくても何個もwindowが開いてしまう現象が置きました。
画像のonloadが何度も発生するとは思えませんが、対策としてloadが終ったらイベントハンドラーを解除する事にしました。
i.onload = function(){}
これでいいのかは微妙ですが。
サンプル
;)
ダウンロード
すぐに使えるように外部JS形式で保存しました。
ZIPファイルを展開するとJSファイルが入っていますので、ダウンロードしてご利用ください。
・openImageSizedWindow.zip
スクリプトはUTF-8で保存されていますので、そのまま使う場合はscriptタグにcharsetを指定する事をお勧めします。
<script type="text/javascript" src="/path/to/js/openImageSizedWindow.js" charset="UTF-8"></script>
まとめ
まだ、おかしいところあったら教えて下さい・・・
関連エントリー
・Re: 第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
・第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
