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

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

関連記事

HTMLソースを表示するブックマークレット(GeSHiでシンタックスハイライト版)

似たようなブックマークレットが続きますが、ご容赦下さい。 先日作ったHTMLソース表示ブックマークレット(Yahoo!Pipes版)は、Pipes側の制限で、一部タグが見えなかったりして使い勝手が微妙 …

no image

第8回:Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズ

久しぶりに twitter ネタです。 というかシツコク JavaScript badges のお話。 以前のエントリーで IE での日付表示がおかしい件に対応しました。 そのエントリーにフォローする …

no image

見ているページのHTMLソースを表示するブックマークレット(Yahoo!Pipes版)

この辺のエントリーに触発されてブックマークレット作りました。 ・URLを渡すとページの内容(htmlソース)をJSONPとかで取得できるAPIをYahoo! Pipesで作った(管理人日記) &#82 …

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

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

no image

動画を楽しもう!(YoutubeをMP4でダウンロードするもっと簡単なブックマークレット)

YoutubeをMP4の高画質で見れる方法がある事が分かり、Google Operating SystemではすでにMP4形式でダウンロードできるブックマークレットが紹介されています。 One way …

スポンサードリンク

スポンサードリンク