画像と同サイズで新しくウィンドウを開く

ソース
親ウィンドウのソース
<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>


ポイントは、親ウィンドウに隠しフィールドを作って、その中に画像のパスを入れてます。
画像のパスは、新しく開くウィンドウからのパスです。
新しく開いたウィンドウ(ここでは、subpic.htm)で、親ウィンドウにあるフォームの値を取得して、それを表示させています。

サンプル
画像1 画像2

▲BACK


IT SOHO CLUB