TOPページ >  ウィンドウを開く、閉じる、制御する > JavaScriptを使って別ウィンドウの表示内容を操作する

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

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

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

タイリクモモンガ
ミケリス
ニホンリス

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

■子ウィンドウを開く
ウィンドウ名 = window.open("子ウィンドウのページURL","ウィンドウ名","オプション指定");
  1. ウィンドウ名:ウィンドウを開くだけの場合は省略できますが、親ウィンドウなど別のページから操作する場合に、どのウィンドウを操作するのか識別するために必要です。
  2. 子ウィンドウのページURL:開いた子ウィンドウに表示するページのURLです。このサンプルでは、最初は空欄にしておいて、親ウィンドウでクリックされたアンカーに応じて表示するページを場合分けしています。
  3. スタイル指定:ウィンドウの大きさやスクロールバー、メニューバーなどの有無を指定する場合、ここに記述します。詳細は、下記を参照してください。
■子ウィンドの表示URLを指定する
ウィンドウ名.location="表示するページのURL";
  1. ウィンドウ名:操作するウィンドウの名前を指定します。この名前は、ウィンドウを開くときに指定したものです。
  2. 表示するページの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を場合分けしています。

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

同一カテゴリ内一覧
一定時間後に自動でウィンドウを閉じる
ウィンドウをスクロールさせて表示する
確認メッセージを表示する
警告メッセージを表示する
ウィンドウのステータスバーに文字列を表示する
JavaScriptを使って別ウィンドウの表示内容を操作する
window.open() のスタイル指定一覧
ウィンドウのサイズ変更を禁止する
ウィンドウの位置や大きさを指定する
ポップアップウィンドウを開く
メニューバーやスクロールバーの有無を指定する
大きさを指定してウィンドウを開く
ウィンドウを閉じる
ウィンドウを開く
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス