１０．ウインドウ・ナビゲータ
</A>
１０－１．ブラウザ情報

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>ブラウザ情報</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- w1=navigator.appName; w2=navigator.appVersion; alert(w1 + "\n" + w2); //--> </SCRIPT> </BODY> </HTML>	ブラウザ情報取得（本例では名前とバージョン） <a href="html/10_1.html" target="top">10-1実行</A> <IMG SRC="gif/10_1.gif" WIDTH=333 HEIGHT=122>

</A>
１０－２．ブラウザチェック(例1)

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>ブラウザ情報</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- ver=navigator.userAgent; if (ver.indexOf('MSIE')>=0){ alert("Webブラウザは　IE　です")} else { alert("Webブラウザは　IE　以外です")} // --> </SCRIPT> </BODY> </HTML>	使用ブラウザの種類により処理内容を変えるとき有効 <a href="html/10_2.html" target="top">10-2実行</A> <IMG SRC="gif/10_2.gif" WIDTH=237 HEIGHT=127>

</A>
１０－３．ブラウザチェック（例2）

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>ブラウザ情報</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- if (document.all){ alert("Webブラウザは　IE　です")} if (document.layers){ alert("Webブラウザは　NN です")} // --> </SCRIPT> </BODY> </HTML>	使用ブラウザの種類により処理内容を変えるとき有効 <a href="html/10_3.html" target="top">10-3実行</A> <IMG SRC="gif/10_2.gif" WIDTH=237 HEIGHT=127>

</A>
１０－４．新ウインドウを開く

ＪａｖａSｃriｐt	記事
<HTML><HEAD><TITLE>新ウインドウを開く</TITLE> <SCRIPT Language="JavaScript"> <!-- function kensaku() { damiy = window.open("tst10_4a.html","search","toolbar=yes, location=yes,directories=yes,status=yes,menubar=yes, scrollbars=yes,width=500,height=400");} //--> </SCRIPT> </HEAD> <BODY> <form name="en1"> 新ウインドウを指定オプション(サイズ等)で開く<br> <input type=button value="表示" onclick="kensaku()"> </form> </BODY></HTML>	本例は新ウインドウを指定オプション(サイズ等)で開く <a href="html/10_4.html" target="top">10-4実行</A> ソース記載はwindow.open(…)の…を行を変えて書いてありますが、コピーして使用する場合は１行に詰める事。（途中に段替えが入るとエラーになります）第２引数（本例："search"の個所）を日本語で行ったら Netscapeでエラーになった。（これは特殊記号も使用しない方がよい）
	オプションパラメータ toolbar=yes　　ツールバーの表示（no：非表示） location=ye　　ロケーションバーの表示（no：非表示） directories=yes　ディレクトリバーの表示（no：非表示） status=yes　　ステータスバーの表示（no：非表示） menubar=yes　　メニューバーの表示（no：非表示） scrollbars=yes　スクロールバーの表示（no：非表示） resizable=yes　　ウインドウサイズの変更（no：変更不可） width=500　　ウインドウの内側の横幅 height=400　ウインドウの内側の高さ titlebar=yes　　タイトルバーの表示（no：非表示） channelmode=no　チャンネルモード fullscreen=no　　　フルスクリーンモード left=100　　　　　　ディスクトップの左からの座標 toop=100　　　　　ディスクトップの右からの座標
<HTML><HEAD><TITLE>新ウインドウ</TITLE></HEAD> <BODY BGCOLOR=#E8FFD0> これは、新ウインドウ[1]です<br> 新ウインドウは下記の指定で開きました。<br><br> <font size=2 color=#ffooff> toolbar=yes,（ツールバーの表示）<br> location=yes,（ロケーションバーの表示）<br> directories=yes,（ディレクトリバーの表示）<br> status=yes,（ステータスバーの表示）<br> menubar=yes,（メニューバーの表示）<br> scrollbars=yes,（スクロールバーの表示）<br> width=500,（ウインドウの横幅）<br> height=400 （ウインドウの高さ）<br> </font> </BODY></HTML>
	こちらのファイルは、上記から開きます

<A NAME="no5"></A>
１０－５．新ウインドウへデータを渡す

ＪａｖａSｃriｐt	記事
<HTML><HEAD><TITLE>新ウインドウを開く</TITLE> <SCRIPT Language="JavaScript"> <!-- function kensaku() { damiy = window.open("10_5a.html", "search"); } //--> </SCRIPT> </HEAD> <BODY> <form name="en1"> <input type=text name=data1> <input type=button value="表示" onclick="kensaku()"><br> 入力した文字を｢新ウインドウ[1]で受け取り｣ →｢新ウインドウ[2]へ表示します｣<br> なお、表示後｢新ウインドウ[1]」を削除する。 </form> </BODY></HTML>	本例は入力した文字後ボタンクリックで"10_5a.html"を開く 10_5a.htmlを読み終わると、新しいウインドウを開きそこに最初に入力した文字を表示します。新ウインドウ名「ｆ2」へデータ書き込み後、10_5a.htmlは閉じます。 <a href="html/10_5.html" target="top">10-5実行</A>
<HTML><HEAD><TITLE>新ウインドウ</TITLE> <SCRIPT Language="JavaScript"> <!-- function eng(){ cstr = window.opener.document.en1.data1.value; f2=window.open(); f2.document.open("text/html"); f2.document.write("<HTML><HEAD></HEAD><BODY>") f2.document.write("これは、新ウインドウ[2]です<br>") f2.document.write("入力された文字は｢"+cstr+"｣です"); f2.document.write("</BODY></HTML>") f2.document.close(); window.close(); } // --> </SCRIPT> </HEAD> <BODY BGCOLOR=#E8FFD0 onload='eng()'> <br><br>データロード中 </BODY></HTML>	f2.document.open("text/html"); f2.document.close(); 上記２行がない場合Netscape4.7では正しく表示されません ("text/html")はHTML文書の意味

</A>
１０－５a．新WindowのHTMLタグを見易く表示する

ＪａｖａSｃriｐt

記事

<HTML><HEAD><TITLE>新ウインドウ</TITLE>
<SCRIPT Language="JavaScript">

</SCRIPT>
</HEAD>
<BODY BGCOLOR=#E8FFD0 onload='eng()'>
<br><br>データロード中
</BODY></HTML>

前項と内容は同じですが、データを書き込んだ新ウインドウ
にデータ量が多い場合、前項ではHTMLタグ及びデータは
横に連続して記述であり、ソースが見ずらいので、ソースを
見やすくしたい場合は本例のように改行「\n」を入れる。

<a href="html/10_5b.html" target="top">10-5b実行</A>

(記述されたソースの確認は右クリックで、「ソースの表示」
　で行なって下さい）

<<A NAME="no6"></A>
１０－６．スクリーン横幅

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>スクリーン横幅</TITLE></HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- alert("このスクリーンの有効横幅は="+ screen.availWidth+ \nこのスクリーンの有効縦幅は=+ screen.availHeight); alert("このスクリーンの横幅は="+ screen.Width + \nこのスクリーンの縦幅は=+ screen.Height); // --> </SCRIPT> </BODY>	スタイルシートを使用して画像表示場所を固定したい場合スクリーンの画面領域サイズにより表示場所が変わってしまうため、スクリーンを読み取り補正するとよい。 availWidth：メニューバーサイズを省いた有効幅 screen.Width ：画面の横幅 <a href="html/10_6.html" target="top">10-6実行</A>

</A>
１０－７．自動ジャンプ

ＪａｖａSｃriｐt

記事

<HTML><HEAD><TITLE>自動ジャンプく</TITLE>
<SCRIPT Language="JavaScript">

</SCRIPT>
</HEAD>
<BODY onLoad="setTimeout('jp()',3000)">
<CENTER>
<B>このページは移転しました</B><BR>
<BR><BR>
お手数ですが、リンクやブックマークの変更をお願いします。<BR>
このページは、3秒後に自動的に移動されます。<BR>
</CENTER>
</BODY></HTML>

setTimeout()は、指定時間後に指定した関数を実行。

これは1回のみ実行であるが、setInterval()の場合は指定
した時間間隔で関数呼び出しを繰り返す。

<a href="html/10_7.html" target="top">10-7実行</A>

</A>
１０－８．ラジオボタンの状態を転送（例1）

ＪａｖａSｃriｐt	記事
<HTML><head><title>ラジオボタンの状態を転送(親)</title> <SCRIPT Language="JavaScript"> <!-- function soufu(){ 　　damiy1 = window.open("10_8b.html", "damiy"); } // -- ></script> </head> <body> <form name="myfm1"> 【ラジオボタンのチェック】<br><br> <input type="radio" name="okuri">ラジオボタン1(元)<br> <input type="radio" name="okuri">ラジオボタン2(元)<br> <input type="radio" name="okuri">ラジオボタン3(元)<br> <input type="radio" name="okuri">ラジオボタン4(元)<br><br> <input type="button" value="転送" onClick="soufu()"> </form> </body> </html>	2003/09/08 (月) 18:34 W.Aさんから下記質問があり作成具体的な質問内容なのですが、Javascript を使用して「親ページにラジオボタンで選択する設問があり、そこで選択した内容を送信ボタンを押すことによって子ページへそっくりコピーさせたい」のです。
	例1はもっとも一般的な方法でwindow.open（・・ファイル名）で指定した"・・ファイル名"を開く方法です。 <a href="html/10_8a.html" target="top">10-8a実行</A>
<HTML><head><title>ラジオボタンの状態を転送(子)</title> <SCRIPT Language="JavaScript"> <!-- for (i=0; i<4; i++){ if(window.opener.document.myfm1.okuri[i].checked) document.myfm2.uke[i].checked=true; } } // -- ></script> </head> <body onload="dcheck()"> <form name="myfm2"> 【ラジオボタンの状態受け】<br><br> <input type="radio" name="uke">ラジオボタン1(受け)<br> <input type="radio" name="uke">ラジオボタン2(受け)<br> <input type="radio" name="uke">ラジオボタン3(受け)<br> <input type="radio" name="uke">ラジオボタン4(受け)<br><br> <input type="button" value="閉じる" onClick="window.close()"> </body> </html>	こちらのファイルは、上記から開く"10_8b.html"です。 window.openerで「親元ファイル」を参照できます if(・・・.checked=true) で親のチェック箇所取得(trueは省略可) document.myfm2.uke[i].checked=true;　で子ウインドウのラジオボタンをチェック。（この場合ボタン名を同じにする事、例"：name="uke")

</A>
１０－９．ラジオボタンの状態を転送（例2）

ＪａｖａSｃriｐt	記事
<HTML><head><title>ラジオボタンの状態を転送(親)</title> <SCRIPT Language="JavaScript"> <!-- function soufu(){ 　　damiy1 = window.open("10_9b.html", "damiy"); 以下　10_8a.html　と同じ	前項の"10_8b.html"を、"10_9b.html"に変える <a href="html/10_9a.html" target="top">10-9a実行</A>
<HTML><head><title>ラジオボタンの状態を転送(子)</title> <SCRIPT Language="JavaScript"> <!-- function dcheck(){ for (i=0; i<4; i++){ document.myfm2.elements[i].checked = window.opener.document.myfm1.elements[i].checked; } } // -- ></script> </head> <body onload="dcheck()"> <form name="myfm2"> 【ラジオボタンの状態受け】<br><br> <input type="radio" name="uke">ラジオボタン1(受け)<br> <input type="radio" name="uke">ラジオボタン2(受け)<br> <input type="radio" name="uke">ラジオボタン3(受け)<br> <input type="radio" name="uke">ラジオボタン4(受け)<br><br> <input type="button" value="閉じる" onClick="window.close()"> </body> </html>	前項との相違は、ボタンに付けた名前ではなく、エレメントオブジェクトで参照/設定をおこないました。こちらは同じフォームのオブジェクト（button,rodio,test･･･）を番号で指定でき、各種オブジェクトの状態を転送したい場合はこちらの方法が便利です。

</A>
１０－10．ラジオボタンの状態を転送（例3）

ＪａｖａSｃriｐt

記事

例3は、子ウインドウ
を開きそこにJavaScript
で記述する方法です。

（ｈｔｍｌファイルが1個
で済む利点があります)

<a href="html/10_10.html" target="top">10-10実行</A>

本例は"f2"と言う名前で
新しいウインドウを作成
したので、後は"f2"へ書き込む

f2.document.open("text/html");
f2.document.close();
上記２行がない場合NN4で
正しく表示されません

【HOME】　【基礎編へ戻る】