วัตถุหน้าต่างเป็นวัตถุระดับบนสุดในรูปแบบวัตถุเบราว์เซอร์ JavaScript และมีวิธีการและคุณสมบัติทั่วไปหลายประการ:
1 เปิดหน้าต่างใหม่
คัดลอกรหัสรหัสดังต่อไปนี้:
window.open(pageURL,ชื่อ,พารามิเตอร์)
ใน:
pageURL คือเส้นทางของหน้าต่างลูก
ชื่อคือหมายเลขอ้างอิงหน้าต่างลูก
พารามิเตอร์คือพารามิเตอร์ของหน้าต่าง (แต่ละพารามิเตอร์คั่นด้วยเครื่องหมายจุลภาค)
ชอบ:
คัดลอกรหัสรหัสดังต่อไปนี้:
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", "แถบเครื่องมือ=0;ความกว้าง=200;ความสูง=200");
3 ปิดหน้าต่างโดยไม่ต้องเปิดกล่องข้อความขึ้นมา
หากไม่ได้เปิดหน้าเว็บผ่านโปรแกรมสคริปต์ (window.open()) ก่อนที่จะเรียกใช้สคริปต์ window.close() เพื่อปิดหน้าต่าง วัตถุ window.opener จะต้องตั้งค่าเป็น null มิฉะนั้นเบราว์เซอร์ (IE7, IE8) จะปรากฏขึ้น ตกลง ปิดกล่องโต้ตอบ
คัดลอกรหัสรหัสดังต่อไปนี้:
<ภาษาสคริปต์ = "javaScript">
ฟังก์ชั่น closeWindow()
-
window.opener = null;
window.open('', '_self', '');
หน้าต่าง.ปิด();
-
</สคริปต์>
<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();
-
</สคริปต์>
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");
ถ้า(str!=null)
-
var v=document.getElementById("v");
v.ค่า+=str;
-
(2) รหัสแบบฟอร์มย่อย
คัดลอกรหัสรหัสดังต่อไปนี้:
var v=document.getElementById("v");
window.parent.returnValue=v.value;
หน้าต่าง.ปิด();
นอกจากนี้ สำหรับหน้าต่างที่เปิดโดย showModalDialog คุณสามารถส่งผ่านค่าผ่านไดอะล็อกอาร์กิวเมนต์ได้:
รหัสหน้าต่างหลัก:
คัดลอกรหัสรหัสดังต่อไปนี้:
<!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");//นี่คือวัตถุหน้าต่างที่ถูกส่งผ่านเป็นพารามิเตอร์
-
</สคริปต์>
</หัว>
<ร่างกาย>
<แบบฟอร์ม>
<ประเภทอินพุต = "ข้อความ" id = "ชื่อ" />
<input type="button" id="open" value="open" onclick="opendialog()"/>
</แบบฟอร์ม>
</ร่างกาย>
</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;//หน้าต่างลูกได้รับพารามิเตอร์ที่ส่งผ่าน
ถ้า(pwin!=ไม่ได้กำหนด)
-
pwin.document.getElementById("ชื่อ").value=document.getElementById("ชื่อ").value;
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<แบบฟอร์ม>
<ประเภทอินพุต = "ข้อความ" id = "ชื่อ" />
<input type="button" id="update" value="Update parent window" onclick="updateParent()"/>
</แบบฟอร์ม>
</ร่างกาย>
</html>
สำหรับหน้าต่างที่เปิดโดย showModalDialog คุณสามารถส่งผ่านค่าผ่าน window.returnValue ได้:
หน้าต่างหลัก:
คัดลอกรหัสรหัสดังต่อไปนี้:
<SCRIPT type="text/javascript">
ฟังก์ชั่น openWindow(){
var bankCard=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;
หน้าต่าง.ปิด();
-
</สคริปต์>
</HEAD>
<ร่างกาย>
<ชื่อแบบฟอร์ม = "myform" action = "" method = "โพสต์">
ข้อมูลบัญชี:<BR>
โปรดเก็บข้อมูลบัญชีของคุณอย่างถูกต้องเพื่อหลีกเลี่ยงการสูญเสีย<BR>
หมายเลขบัญชี: <INPUT name="cardNum" type="text" size="40"><BR>
รหัสผ่าน: <INPUT name="cardPass" type="password" size="45"><BR>
<INPUT type="button" name="btn" value="Confirm" onClick="closeWindow()">
</รูปแบบ>
</ร่างกาย>
6.2 การแนะนำโดยละเอียดเพิ่มเติม
ดังที่เราทุกคนทราบกันดีว่าฟังก์ชัน window.open() สามารถใช้เปิดหน้าต่างใหม่ได้ ดังนั้นจะส่งค่าไปยังแบบฟอร์มหลักในแบบฟอร์มลูกได้อย่างไร ที่จริงแล้ว คุณสามารถรับข้อมูลอ้างอิงของแบบฟอร์มหลักผ่านหน้าต่างได้ .ที่เปิด
ตัวอย่างเช่น ถ้าเราสร้างรูปแบบใหม่ FatherPage.htm:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
ฟังก์ชั่นOpenChildWindow()
-
window.open('ChildPage.htm');
-
</สคริปต์>
<ประเภทอินพุต = "ข้อความ" id = "txtInput" />
<ประเภทอินพุต = "ปุ่ม" ค่า = "OpenChild" onclick = "OpenChildWindow()" />
จากนั้นใน ChildPage.htm คุณสามารถเข้าถึงองค์ประกอบในแบบฟอร์มหลักผ่าน window.opener:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
ฟังก์ชั่น SetValue()
-
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
หน้าต่าง.ปิด();
-
</สคริปต์>
<ประเภทอินพุต = "ข้อความ" id = "txtInput" />
<ประเภทการป้อนข้อมูล =ค่า "ปุ่ม" = "SetFather" onclick = "SetValue()" />
ที่จริงแล้ว ในขณะที่เปิดฟอร์มย่อย เรายังสามารถกำหนดค่าให้กับองค์ประกอบของฟอร์มย่อยได้ เนื่องจากฟังก์ชัน window.open จะส่งกลับการอ้างอิงไปยังฟอร์มย่อยด้วย ดังนั้น FatherPage.htm จึงสามารถแก้ไขได้ดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
ฟังก์ชั่นOpenChildWindow()
-
var child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
-
</สคริปต์>
<ประเภทอินพุต = "ข้อความ" id = "txtInput" />
<ประเภทอินพุต = "ปุ่ม" ค่า = "OpenChild" onclick = "OpenChildWindow()" />
ด้วยการพิจารณาว่าการอ้างอิงของฟอร์มย่อยว่างเปล่าหรือไม่ เรายังสามารถควบคุมให้เปิดฟอร์มย่อยเพียงอันเดียวเท่านั้น:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
ต่างกันที่เด็ก
ฟังก์ชั่นOpenChildWindow()
-
ถ้า(!ลูก)
child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
-
</สคริปต์>
<ประเภทอินพุต = "ข้อความ" id = "txtInput" />
<ประเภทอินพุต = "ปุ่ม" ค่า = "OpenChild" onclick = "OpenChildWindow()" />
เพียงอย่างเดียวไม่เพียงพอ เมื่อปิดแบบฟอร์มลูก จะต้องล้างตัวแปรลูกของแบบฟอร์มหลักด้วย มิฉะนั้น จะไม่สามารถเปิดแบบฟอร์มลูกอีกครั้งได้หลังจากเปิดแล้วปิด:
คัดลอกรหัสรหัสดังต่อไปนี้:
<body onunload="ยกเลิกการโหลด()">
<script type="text/javascript">
ฟังก์ชั่น SetValue()
-
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
หน้าต่าง.ปิด();
-
ฟังก์ชั่นยกเลิกการโหลด()
-
window.opener.child=null;
-
</สคริปต์>
<ประเภทอินพุต = "ข้อความ" id = "txtInput" />
<ประเภทการป้อนข้อมูล =ค่า "ปุ่ม" = "SetFather" onclick = "SetValue()" />
</ร่างกาย>