Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

JavaScript 小技集

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で画像サイズと合ったポップアップウィンドウを開く

-JavaScript, 小技集

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

Google Analytics の検索エンジン定義と独自の検索エンジンを追加する方法

【2009/09/07:追記】 このページで解説している方法が使えなくなりました。 問題の解説と対応策は下記エントリーをご覧ください。 Google Analytics に独自検索エンジンを追加してい …

no image

第7回:サムネイル作成APIをJavaScriptで簡単に切り替える方法

SimpleAPIをはじめたくさんのサムネイルAPIサービス(もちろん無料)のおかげで、簡単にサイトのスクリーンショットをサムネイル画像として自分のブログに貼り付ける事ができるようになりました。すでに …

「TwitterFollowBadge」がIEで見れない件の対応方法

なんか、近くで嘆きの声が聞こえた気がするので(w)さらっと書いときます。 TwitterFollowBadgeっていう、ブログのサイド(右か左)にはれるTwitter用のブログパーツがあるんだけど、こ …

no image

Facebookページのiframe形式タブに切り替える場合は、バグに注意!

【2011/03/23:追記】 セキュアな接続(https)の場合に、iframeタブが表示されない問題が解決されていました。 Facebook Platform .:. Bug 15200 &#82 …

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

[追記:2008/07/04] 更に改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。 ・Re2: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く …

スポンサードリンク

スポンサードリンク