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

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

関連記事

Movable Typeで記事中の画像に遅延ロード効果の「Lazy Load」を一括適用する方法

MovableTypeのカスタマイズ情報などで大変お世話になっている小粋空間さんで、こんな記事があがっていたので反応してエントリーしてみます。 ・画像を遅延ロードする定番jQueryプラグイン「Laz …

no image

blog chart.jp のブログパーツが重いので勝手に改造した

すでにローンチから時間が経ってしまっていますが、ブログを色々な角度から解析してチャート化してくれるWebサービス「blog chart.jp」というのがあります。 ABCDEFGの頭文字をもつ6つの指 …

no image

Deliciousでサイト内ブックマーク数の合計を取得するPHPサンプル

はてなブックマークにはサイト内のブックマーク数合計を表示してくれるはてブカウンターというのがあります。他のSBMには無い機能ですが、サイトの人気度を示す良い指標だと思っています。 参考:はてブ数100 …

ちょっとまった!→FeedBurner経由の分散したブックマークを一つにまとめる方法

つい先日、FeedBurnerのトラッキング用パラメーターを取り除くUserScriptというのを公開したのですが、FeedBurnerやTwitterFeedが勝手に追加してくるパラメーターがウザイ …

Raspberry Pi 4 Model B 8GBでライブ配信(1) USB接続のWEBカメラ映像をFFmpegで保存してみる

ブログご無沙汰しております。ヤガーです。 本業のWEB開発と並行して、リモートワーク推奨の影響でライブ配信などの需要が高まっており、以前よりイベントなどで配信をしていた関係で様々な形式でのライブ配信方 …

スポンサードリンク

スポンサードリンク