ブログでもだいたい使えるHTMLタグリファレンス

JavaScript を使って別ウィンドウを開いた際に、イベントパンドラを使って親ウィンドウ（別ウィンドウを開いた元のページ)から子ウィンドウの表示内容を操作することができます。

サンプルです。ラジオボタンをチェックしてください。子ウィンドウが開いて、説明のページが表示されます。

このソースで使用しているJavaScriptは、下記の通りです。

■子ウィンドウを開く

ウィンドウ名 = window.open("子ウィンドウのページURL","ウィンドウ名","オプション指定");

ウィンドウ名：ウィンドウを開くだけの場合は省略できますが、親ウィンドウなど別のページから操作する場合に、どのウィンドウを操作するのか識別するために必要です。
子ウィンドウのページURL：開いた子ウィンドウに表示するページのURLです。このサンプルでは、最初は空欄にしておいて、親ウィンドウでクリックされたアンカーに応じて表示するページを場合分けしています。
スタイル指定：ウィンドウの大きさやスクロールバー、メニューバーなどの有無を指定する場合、ここに記述します。詳細は、下記を参照してください。

■子ウィンドの表示URLを指定する

ウィンドウ名.location="表示するページのURL";

ウィンドウ名：操作するウィンドウの名前を指定します。この名前は、ウィンドウを開くときに指定したものです。
表示するページのURL：ウィンドウに表示するページを絶対パスで指定します。

このサンプルのソースは下記のようになっています。

<SCRIPT LANGUAGE="JavaScript">
<!--
function animals(Name) {
if ( Name != 0 ) { Animal = window.open("","Animal","width=420,height=245"); }

if ( Name == 1 ) {
Animal.window.location="http://html.appelle.jp/sample/animals/Pteromys_volans.html"; }
if ( Name == 2 ) {
Animal.window.location="http://html.appelle.jp/sample/animals/Callosciurus_prevosti.html"; }
if ( Name == 3 ) {
Animal.window.location="http://html.appelle.jp/sample/animals/Sciurus_lis.html"; }
}

//-->
</SCRIPT>

<form>
<input type="radio" name="Name" onClick="animals(1)">タイリクモモンガ</a><br>
<input type="radio" name="Name" onClick="animals(2)">ミケリス</a><br>
<input type="radio" name="Name" onClick="animals(3)">ニホンリス</a>
</form>

このサンプルでは、ラジオボタンがクリックされたとき（ onClick )に、animalsという関数(ファンクション)を呼び出し、同時に、Nameという引数を関数に引き渡しています。なんらかの引数( 0ではない)が引き渡されたときに子ウィンドを開き、その引数を使って if 文で表示するURLを場合分けしています。

ランキングに参加中です! お役に立てたらクリックをお願いします→

ブログでもだいたい使えるHTMLタグ リファレンス

JavaScriptを使って別ウィンドウの表示内容を操作する