ความแตกต่างระหว่าง window.parent และ window.opener JavaScript เรียกเมธอดหน้าต่างหลัก
1: window.parent เป็นตัวอย่างของหน้า iframe ที่เรียกวัตถุหน้าหลัก:
ก.html
รหัส Html<html>
<head><title>หน้าหลัก</title></head>
<ร่างกาย>
<ชื่อแบบฟอร์ม = "form1" id = "form1">
<input type="text" name="username" id="username"/>
</แบบฟอร์ม>
<iframe src="b.html" width=100%></iframe>
</ร่างกาย>
</html>
หากเราต้องกำหนดค่าให้กับกล่องข้อความชื่อผู้ใช้ใน a.htm ใน b.htm เช่นเดียวกับฟังก์ชันการอัปโหลดอื่นๆ หน้าฟังก์ชันการอัปโหลดจะอยู่ใน Ifrmae หลังจากการอัปโหลดสำเร็จ เราจะใส่เส้นทางที่อัปโหลดลงในกล่องข้อความ ของหน้าหลักควรเขียน
โค้ด
ด้วย b.html
<script type="text/javascript">
var _parentWin = window.parent;
_parentWin.form1.username.value = "xxxx" ;
</สคริปต์>
ที่อยู่อินสแตนซ์: http://www.cnspry.cn/blog/attachments/window.parent instance/a.html
รหัสที่มา:
1.a.html
รหัส HTML
<html>
<หัว>
<title>หน้าหลัก</title>
<สคริปต์>
/** เพิ่มตัวแปรทดสอบเพื่อทดสอบหน้าต่างลูก IFrame ที่เรียกตัวแปรร่วมของหน้าต่างหลัก*/
var parentVairous = "ตัวแปรทดสอบถูกเพิ่มเพื่อทดสอบหน้าต่างลูก IFrame ที่เรียกตัวแปรร่วมของหน้าต่างหลัก";
ฟังก์ชั่น parentInvoidIFrame()
-
var iframeTest = document.frames["iframeTest"]; //ใช้ document.getElementById("iframeTest");
การแจ้งเตือน (iframeTest.document.body.innerHTML);
การแจ้งเตือน (iframeTest.iFrameVair);
-
</สคริปต์>
</หัว>
<ร่างกาย>
<ชื่อแบบฟอร์ม = "form1" id = "form1">
<input type="text" name="username" id="username"/>
<ประเภทอินพุต = "ปุ่ม" ค่า = "หน้าต่างหลักเรียกเนื้อหาในหน้าต่างลูก IFrame" onclick = 'parentInvoidIFrame()'/>
</แบบฟอร์ม>
<iframe src="b.html" width = '100%' id = 'iframeTest'></iframe>
</ร่างกาย>
</html>
1.b.html
รหัส HTML
<html>
<หัว>
<title></title>
<script type="text/javascript">
/** เพิ่มฟังก์ชันส่วนกลางของหน้าต่างลูกเพื่อทดสอบฟอร์มหลักที่เรียกใช้ฟังก์ชันโกลบอลของฟอร์มลูก IFrame*/
var iFrameVair = "ทดสอบฟอร์มหลักเพื่อเรียกใช้ฟังก์ชันโกลบอลของฟอร์มลูก IFrame";
functionUpdateParent()
-
var _parentWin = window.parent;
_parentWin.form1.username.value = "xxxx" ;
-
ฟังก์ชั่น childInvoidParent()
-
var parentVairous = window.parent.window.parentVairous;
การแจ้งเตือน (parentVairous);
-
</สคริปต์>
</หัว>
<ร่างกาย>
<ชื่อแบบฟอร์ม = "form1" id = "form1">
<p> </p>
<p align="center">
<ประเภทอินพุต = "ปุ่ม"
ชื่อ = "ปุ่ม"
รหัส = "ปุ่ม"
value = "อัปเดตเนื้อหาชื่อผู้ใช้ของหน้าหลัก"
onclick = "อัปเดตพาเรนต์()">
<ประเภทอินพุต = "ปุ่ม"
ชื่อ = "button2"
รหัส = "ปุ่ม 2"
value = "ทดสอบหน้าต่างลูก IFrame เพื่อเรียกตัวแปรส่วนกลางของหน้าต่างหลัก"
onclick = "childInvoidParent();"/>
</p>
<p> </p>
</แบบฟอร์ม>
</ร่างกาย>
</html>
PS: ไม่สามารถรับข้ามโดเมนได้ ตัวอย่างเช่น หาก src ของ iframe คือ 'http://www.xxx.ccc/' ก็ไม่สามารถรับได้
2: window.opener เป็นเพจย่อยที่เปิดโดย window.open ที่เรียกที่อยู่อินสแตนซ์ของวัตถุเพจหลัก: http://www.cnspry.cn/blog/attachments/window.opener instance/a.html
รหัสที่มา:
2.a.html
รหัส HTML
<html>
<หัว>
<title>หน้าหลัก</title>
<script type="text/javascript">
/** เพิ่มตัวแปรทดสอบเพื่อทดสอบหน้าต่างลูก IFrame ที่เรียกตัวแปรร่วมของหน้าต่างหลัก*/
var parentVairous = "ตัวแปรทดสอบถูกเพิ่มเพื่อทดสอบหน้าต่างลูก IFrame ที่เรียกตัวแปรร่วมของหน้าต่างหลัก";
-
* เนื่องจากแตกต่างจาก IFrame (IFrame มี id, window.open() มีโหมดที่แตกต่างจากหน้าต่างหลัก-ลูกของ IFrame)
* ดังนั้นเมื่อเปิดหน้าต่างใหม่ผ่านเมธอด window.open() จะต้องมีอ็อบเจ็กต์ของหน้าต่างใหม่
* แน่นอนว่าหน้าต่างย่อยต้องปรากฏขึ้นก่อนจึงจะสามารถเรียกตัวแปรในหน้าต่างย่อยได้ ไม่เช่นนั้นข้อยกเว้นจะถูกส่งออกไป
-
varOpenWindow;
ฟังก์ชั่น openSubWin()
-
OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,ตำแหน่ง =ไม่, สถานะ=ไม่');
-
ฟังก์ชั่น parentInvoidChild()
-
if(OpenWindow)//แน่นอนว่าหน้าต่างย่อยจะต้องปรากฏขึ้นก่อนจึงจะสามารถเรียกตัวแปรในหน้าต่างย่อยได้ ไม่เช่นนั้นข้อยกเว้นจะถูกส่งออกไป
-
การแจ้งเตือน (OpenWindow.iFrameVair);
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<ชื่อแบบฟอร์ม = "form1" id = "form1">
<input type="text" name="username" id="username"/>
<input type="button" value="ป๊อปอัพเพจย่อย" onclick = "openSubWin()">
<input type="button" value="ทดสอบการเรียกตัวแปรส่วนกลางในหน้าต่างป๊อปอัป" onclick = "parentInvoidChild()">
</แบบฟอร์ม>
</ร่างกาย>
</html>
2.b.html
รหัส HTML
<html>
<หัว>
<title>หน้าย่อย</title>
<script type="text/javascript">
/** เพิ่มฟังก์ชันส่วนกลางของหน้าต่างลูกเพื่อทดสอบฟอร์มหลักที่เรียกใช้ฟังก์ชันโกลบอลของฟอร์มลูก IFrame*/
var iFrameVair = "ทดสอบฟอร์มหลักเพื่อเรียกใช้ฟังก์ชันโกลบอลของฟอร์มลูก IFrame";
functionUpdateParent()
-
var _parentWin = window.opener;
_parentWin.form1.username.value = "xxxx" ;
-
ฟังก์ชั่น childInvoidParent()
-
var parentVairous = window.opener.window.parentVairous;
การแจ้งเตือน (parentVairous);
-
</สคริปต์>
</หัว>
<ร่างกาย>
<ชื่อแบบฟอร์ม = "form1" id = "form1">
<p> </p>
<p align="center">
<ประเภทอินพุต = "ปุ่ม"
onclick = "อัปเดตพาเรนต์();"
ชื่อ = "ปุ่ม"
รหัส = "ปุ่ม"
value="อัปเดตเนื้อหาชื่อผู้ใช้ของหน้าหลัก">
<ประเภทอินพุต = "ปุ่ม"
ชื่อ = "button2"
รหัส = "ปุ่ม 2"
value = "ทดสอบหน้าต่างลูก IFrame เพื่อเรียกตัวแปรส่วนกลางของหน้าต่างหลัก"
onclick = "childInvoidParent();"/>
</p>
<p> </p>
</แบบฟอร์ม>
</ร่างกาย>
หลังจากที่ hanjs เตือนแล้ว สิ่งสำคัญคือต้องทราบว่าหน้าต่างลูกของหน้าต่างโมดอลไม่สามารถแก้ไขเนื้อหาใดๆ ในหน้าหน้าต่างหลักได้
ตัวอย่างเช่น แก้ไข: OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes, ปรับขนาดได้= ใช่, ตำแหน่ง=ไม่, สถานะ=ไม่');
สำหรับ: OpenWindow = window.showModalDialog("b.html",'newwindow',"dialogHeight:100px,center:yes,resizable:no,status:no");
เมื่อคุณต้องการแก้ไขเนื้อหาในหน้าต่างหลักในหน้าต่างลูก ข้อผิดพลาดจะปรากฏขึ้นว่า "XX" ว่างเปล่าหรือไม่ใช่วัตถุ และ "XX" นี่คือเนื้อหาในหน้าต่างหลักที่คุณต้องการแก้ไข