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

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

関連記事

WordPressでstyle.cssを更新したらwp_enqueue_styleでキャッシュクリアする

どうも、ヤガーです。 しばらくWEB技術ネタを投稿していませんが、頻繁に使うテクニックについてはちゃんとブログに残していこうと思います。 企業HPなどを制作する時に、長い間Wordpressが使われて …

no image

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

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

FlickrExがWordPressのLazy Load Pluginに対応しました!

先月このブログにも導入し、Lazy Loadとの共存のための修正などで協力させていただいたFlickrExですが、どうもWordPressでうまくいかないという声が聞こえてきていたので、なんとなくやり …

高感度撮影した写真のノイズ低減を3つのソフトで比較(Photoshop Elements, Neat Image, Photoshop Lightroom)

先日、ホタルの高感度撮影に挑戦したところ、愛用しているGF3ではノイズがかなりヒドイ状態で見るも無残だったため、少しでもノイズを除去できないかと調べてみました。画像の編集にはPhotoshop Ele …

WordPressテーマ作成の第一歩。ファイル・テンプレート構造を理解する

Movable Typeでブログを続けて7年目の@yagerです。特にこのブログをWordPressに変えようとかって話ではないんですが、メインで開発している言語がPHPだったりもしますし、新しいサイ …

スポンサードリンク

スポンサードリンク