window オブジェクトは JavaScript ブラウザ オブジェクト モデルの最上位オブジェクトであり、複数の共通メソッドとプロパティが含まれています。
1 新しいウィンドウを開く
次のようにコードをコピーします。
window.open(ページURL,名前,パラメータ)
で：
pageURL は子ウィンドウのパスです
name は子ウィンドウハンドルです
パラメータはウィンドウパラメータです（各パラメータはカンマで区切られます）。
のように：
次のようにコードをコピーします。
window.open("http://www.cnblogs.com/zhouhb/","open",'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=いいえ、サイズ変更可能 = いいえ、場所 = いいえ、ステータス = いいえ');
2 モーダルウィンドウを開く
次のようにコードをコピーします。
window.showModalDialog("http://www.cnblogs.com/zhouhb/","open","toolbars=0;width=200;height=200");
3 プロンプトボックスを表示せずにウィンドウを閉じます
Web ページがスクリプト プログラム (window.open()) を通じて開かれていない場合は、window.close() スクリプトを呼び出してウィンドウを閉じる前に、window.opener オブジェクトを null に設定する必要があります。そうしないと、ブラウザ (IE7、 IE8) は、[OK を閉じてください] ダイアログ ボックスをポップアップ表示します。
次のようにコードをコピーします。
<スクリプト言語="JavaScript">
関数 closeWindow()
{
window.opener = null;
window.open('', '_self', '');
window.close();
}
</script>
<input type='button' value='ウィンドウを閉じる' onClick="closeWindow()">
または
<input type="button" value="ウィンドウを閉じる" onClick="window.opener = null;
window.open('', '_self', '');window.close()">
フレームウィンドウを閉じるため
次のようにコードをコピーします。
<スクリプト言語="JavaScript">
関数 closeWindow()
{
window.opener = null;
window.open('', '_top', '');
window.parent.close();
}
</script>
4 位置オブジェクトの使用法
次のようにコードをコピーします。
window.location.reload();//現在のページを更新します
window.location.href="http://www.cnblogs.com/zhouhb/" //他のページをロードします
5 履歴オブジェクトの使用
次のようにコードをコピーします。
window.history.go(1); //進む
window.history.go(-1); //戻る
6 子フォームは親フォームに値を渡します
6.1 簡単な方法
(1) 親フォームでサブフォームを開く
次のようにコードをコピーします。
var str=window.showModalDialog("s.html");
if(str!=null)
{
var v=document.getElementById("v");
v.value+=str;
}
(2) サブフォームコード
次のようにコードをコピーします。
var v=document.getElementById("v");
window.parent.returnValue=v.value;
window.close();
さらに、showModalDialog によって開かれたウィンドウの場合、dialogArguments を通じて値を渡すこともできます。
親ウィンドウのコード:
次のようにコードをコピーします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題のドキュメント</title>
<script type="text/javascript">
関数opendialog()
{
window.showModalDialog("child.html",window,"win","resable=false");//ここではウィンドウオブジェクトがパラメータとして渡されます
}
</script>
</head>
<本文>
<フォーム>
<input type="text" id="name" />
<input type="button" id="open" value="open" onclick="opendialog()"/>
</form>
</body>
</html>
サブウィンドウのコード:
次のようにコードをコピーします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題のドキュメント</title>
<script type="text/javascript">
関数 updateParent()
{
var pwin=window.dialogArguments;//子ウィンドウは渡されたパラメータを取得します
if(pwin!=未定義)
{
pwin.document.getElementById("name").value=document.getElementById("name").value;
}
}
</script>
</head>
<本文>
<フォーム>
<input type="text" id="name" />
<input type="button" id="update" value="親ウィンドウを更新する" onclick="updateParent()"/>
</form>
</body>
</html>
showModalDialog によって開かれたウィンドウの場合、window.returnValue を通じて値を渡すこともできます。
メインウィンドウ:
次のようにコードをコピーします。
<SCRIPT type="text/javascript">
関数openWindow(){
varbankCard=window.showModalDialog("counter.html","","dialogWidth=400px;dialogHeight=200px");
alert("あなたの銀行カードのパスワードは "+bankCard+"/n");
}
</スクリプト>
(2) 窓を開ける
次のようにコードをコピーします。
<頭>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>ウィンドウの演習</TITLE>
<SCRIPT type="text/javascript" language="javascript">
関数 closeWindow(){
window.returnValue=document.myform.cardPass.value;
window.close();
}
</スクリプト>
</HEAD>
<本体>
<FORM name="myform" action="" method="post">
アカウント情報:<BR>
損失を避けるためにアカウント情報を適切に保管してください<BR>
口座番号: <INPUT name="cardNum" type="text" size="40"><BR>
パスワード: <INPUT name="cardPass" type="password" size="45"><BR>
<INPUT type="button" name="btn" value="確認" onClick="closeWindow()">
</FORM>
</BODY>
6.2 より詳細な紹介
ご存知のとおり、window.open() 関数は新しいウィンドウを開くために使用できます。実際、子フォームの親フォームに値を渡すにはどうすればよいでしょうか。実際には、ウィンドウを介して親フォームの参照を取得できます。 。オープナー。
たとえば、新しいフォーム FatherPage.htm を作成するとします。
次のようにコードをコピーします。
<script type="text/javascript">
functionOpenChildWindow()
{
window.open('ChildPage.htm');
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
次に、ChildPage.htm で、window.opener を介して親フォームの要素にアクセスできます。
次のようにコードをコピーします。
<script type="text/javascript">
関数 SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
実際、サブフォームを開いているときに、サブフォームの要素に値を割り当てることもできます。これは、window.open 関数がサブフォームへの参照も返すため、FatherPage.htm を次のように変更できます。
次のようにコードをコピーします。
<script type="text/javascript">
functionOpenChildWindow()
{
var child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
サブフォームの参照が空かどうかを判断することで、サブフォームを 1 つだけ開くように制御することもできます。
次のようにコードをコピーします。
<script type="text/javascript">
var 子
functionOpenChildWindow()
{
if(!子)
child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
これだけでは十分ではありません。子フォームを閉じるときに、親フォームの子変数もクリアする必要があります。そうしないと、子フォームを開いてから閉じた後に再度開くことができません。
次のようにコードをコピーします。
<body onunload="アンロード()">
<script type="text/javascript">
関数 SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
functionUnload()
{
window.opener.child=null;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
</body>