画像と同サイズで新しくウィンドウを開く
今回のテーマは、「画像と同サイズで新しくウィンドウを開く」です。
論より証拠！という事で、まずサンプルを見てください。

サンプル
画像1 画像2

はい、ご覧になりました？
あの「画像１」は我が社がある豊平という広島の片田舎で・・・

・・・あれ？
あ！すみません。何やら主旨が違う方向にいってますね。
そうそう、画像と同サイズで・・・という内容でした。
いやぁ、間違えました！！(わざとらしいとか言わないでください。)

という事で、画像と同サイズで開いたと思います。
(もし、開かなかったという方は申し訳ありませんが、ご連絡ください。)


パッと思いついたのは、単純に画像のパスを入れて、「window.open」を使い、サイズを指定する事でした。
しかし、実際にやってみると、デフォルトのtopmarginとleftmarginのおかげでピッタリ収まりません。
それで、色々捻り出してみたのが、以下のソースです。ザッと見てください。

ソース 
親ウィンドウのソース
<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
<!--
function openNew(pic) {
  document.picName.picItem.value = pic;
  newWin = window.open("subpic.htm","newWin","menubar=0");
}
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="picName">
<INPUT TYPE="hidden" NAME="picItem">
</FORM>
<A HREF="javaScript:void(0)" onClick="openNew('images/sample01.jpg')">サンプル1</A>
<A HREF="javaScript:void(0)" onClick="openNew('images/sample02.jpg')">サンプル2</A>
</BODY>
</HTML>

-------------------------------------
画像を表示するsubpic.htmのソース
<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
<!--
window.resizeTo(10,10);
window.focus();
-->
</SCRIPT>
</HEAD>
<BODY TOPMARGIN="0" LEFTMARGIN="0">
<SCRIPT Language="JavaScript">
<!--

//ブラウザの種類を判定
NN=navigator.appName;

//親ウィンドウから表示する画像を取得
strPic=opener.document.picName.picItem.value;

//画像書き出し
document.open();
document.write("<IMG SRC='",strPic,"'>");
document.close();

//画像の読み込み状況を調べる
timerID=setTimeout("check()",200);

function check() {
  clearTimeout(timerID);
  flag=true;

  if(document.images[0].complete==false)
    flag=false;

  if(flag==true) {
    //ブラウザがIEの場合の幅と高さを取得
    if(NN.indexOf("Micro")>=0) {
      setW=document.images[0].width+10;
      setH=document.images[0].height+30;
      window.resizeTo(setW,setH);
    } else {
      //ブラウザがNetscapeの場合の幅と高さを取得
      setW=document.images[0].width;
      setH=document.images[0].height+77;
      window.innerWidth=setW;
      window.innerHeight=setH;
    }
  } else {
    timerID=setTimeout("check()",200);
  }
}
-->
</SCRIPT>
</BODY>
</HTML>


何やら長くなってしまいました。
しかし、実際にやっている事はそんなに複雑な事では、ありません。

まず、2つのホームページを作ります。
一つが、メインページです。
もう一つは、画像を表示させる為専用のページです。

メインページの方は、見ていただけたら分かりますが、非常に簡単です。
<FORM NAME="picName"> <INPUT TYPE="hidden" NAME="picItem"> </FORM>
として、picItemという名前の隠しフィールドを作っています。
あとは、onClickイベントで、function文を呼び出し、引数として画像のパスを指定しているだけです。
注意していただくのは、画像のパスは画像表示用のHTMLファイルからのパスだという事です。
(ここでは、前提として画像表示専用のHTMLファイルをメインページと同じ階層に入れています)

呼ばれて飛び出たfunction(ここではopenNewですね。)が、隠しフィールドのdocument.picName.picItemにさりげなく画像のパスを入れてます。
その次に、window.openで画像表示用のHTMLファイル(subpic.htm)を開くわけです。


さて、開かれたサブウィンドウは文句も言わずに与えられた仕事をこなします。

ポイントは・・・
strPic=opener.document.picName.picItem.value;

document.open();
document.write("<IMG SRC='",strPic,"'>");
document.close();
の部分です。

初めに、strPicというひねりのない変数に親ウィンドウの隠しフィールドの値を代入しています。
それから、実際にdocument.writeで画像の表示を行っています。

続いて画像の読込が終了したら、その画像の高さと幅を計っています。

後は、ウィンドウのサイズを整えて終わりです。

「いやぁ出来た、出来た」と一人で悦に入っていましたが、他の方のやり方を見ていると非常に複雑かつ厳密に書かれていて愕然とました・・・・
という事で、タイトルに「(簡易式)」と入れました。
この奥ゆかしさに免じて、使ってみてください。


▲BACK


IT SOHO CLUB