การอ้างอิงระหว่างกรอบงาน
เฟรมทั้งหมดในเพจมีให้เป็นแอตทริบิวต์ของวัตถุหน้าต่างในรูปแบบของคอลเลกชัน ตัวอย่างเช่น window.frames แสดงถึงคอลเลกชันของเฟรมทั้งหมดในเพจ ซึ่งคล้ายกับวัตถุในรูปแบบ วัตถุลิงก์ วัตถุรูปภาพ ฯลฯ . แต่ความแตกต่างคือ คอลเลกชันเหล่านี้เป็นคุณสมบัติของเอกสาร ดังนั้น เพื่ออ้างอิงเฟรมย่อย คุณสามารถใช้ไวยากรณ์ต่อไปนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
window.frames["frameName"];
window.frames.frameName
window.frames[ดัชนี]
ในบรรดาคำเหล่านี้ สามารถแทนที่หรือละเว้นด้วย self ได้ สมมติว่า frameName เป็นเฟรมแรกในเพจ วิธีการเขียนต่อไปนี้จะเทียบเท่ากัน:
คัดลอกรหัสรหัสดังต่อไปนี้:
self.frames["frameName"]
ตนเอง.เฟรม[0]
เฟรม[0]
ชื่อเฟรม
แต่ละเฟรมสอดคล้องกับหน้า HTML ดังนั้นเฟรมนี้จึงเป็นหน้าต่างเบราว์เซอร์อิสระ โดยมีคุณสมบัติทั้งหมดของหน้าต่าง การอ้างอิงที่เรียกว่าเฟรมคือการอ้างอิงถึงวัตถุหน้าต่าง ด้วยวัตถุหน้าต่างนี้ คุณสามารถใช้งานเพจต่างๆ ในนั้นได้อย่างง่ายดาย เช่น การใช้วัตถุ window.document เพื่อเขียนข้อมูลไปยังเพจ การใช้คุณสมบัติ window.location เพื่อเปลี่ยนเพจในเฟรม เป็นต้น
ข้อมูลต่อไปนี้จะแนะนำการอ้างอิงร่วมกันระหว่างกรอบงานระดับต่างๆ:
1. อ้างอิงจากเฟรมหลักไปยังเฟรมย่อย
เมื่อรู้หลักการข้างต้นแล้ว การอ้างอิงเฟรมลูกจากเฟรมพาเรนต์จึงเป็นเรื่องง่ายมาก นั่นคือ:
คัดลอกรหัสรหัสดังต่อไปนี้:
window.frames["frameName"];
ข้อมูลนี้อ้างอิงถึงเฟรมย่อยชื่อ frameName ภายในเพจ หากคุณต้องการอ้างอิงเฟรมย่อยภายในเฟรมย่อย ตามธรรมชาติของเฟรมที่อ้างอิงซึ่งจริงๆ แล้วคือวัตถุหน้าต่าง คุณสามารถนำไปใช้ได้ดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
window.frames["frameName"].frames["frameName2"];
ด้วยวิธีนี้ เฟรมย่อยระดับที่สองจะถูกอ้างอิง และโดยการเปรียบเทียบ ก็สามารถบรรลุการอ้างอิงเฟรมเวิร์กหลายเลเยอร์ได้
2. อ้างอิงจากเฟรมลูกไปยังเฟรมพาเรนต์
แต่ละวัตถุหน้าต่างมีคุณสมบัติพาเรนต์ที่แสดงถึงเฟรมพาเรนต์ หากเฟรมนั้นเป็นเฟรมระดับบนสุดอยู่แล้ว window.parent จะแสดงถึงเฟรมนั้นด้วย
3. การอ้างอิงระหว่างเฟรมพี่น้อง
หากสองเฟรมเป็นเฟรมย่อยของเฟรมเดียวกัน เฟรมเหล่านั้นจะถูกเรียกว่าเฟรมพี่น้องและสามารถอ้างอิงถึงกันและกันผ่านเฟรมหลักได้ ตัวอย่างเช่น เพจจะมีเฟรมย่อยสองเฟรม:
คัดลอกรหัสรหัสดังต่อไปนี้:
<frameset แถว="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</เฟรมเซ็ต>
ใน frame1 คุณสามารถใช้คำสั่งต่อไปนี้เพื่ออ้างอิง frame2:
คัดลอกรหัสรหัสดังต่อไปนี้:
self.parent.frames["frame2"];
4. การอ้างอิงร่วมกันระหว่างกรอบงานระดับต่างๆ
ระดับของกรอบงานมีไว้สำหรับกรอบงานระดับบนสุด เมื่อระดับต่างกัน ตราบใดที่คุณทราบระดับที่คุณอยู่ รวมถึงระดับและชื่อของเฟรมอื่น คุณสามารถเข้าถึงกันได้อย่างง่ายดายโดยใช้คุณสมบัติของวัตถุหน้าต่างที่อ้างอิงโดยเฟรม เช่น:
คัดลอกรหัสรหัสดังต่อไปนี้:
self.parent.frames["ชื่อเด็ก"].frames["targetFrameName"];
5. อ้างอิงถึงเฟรมระดับบนสุด
เช่นเดียวกับคุณสมบัติหลัก วัตถุหน้าต่างก็มีคุณสมบัติด้านบนเช่นกัน แสดงถึงการอ้างอิงถึงเฟรมระดับบนสุด ซึ่งสามารถใช้เพื่อกำหนดว่าตัวเฟรมนั้นเป็นเฟรมระดับบนสุดหรือไม่ ตัวอย่างเช่น:
คัดลอกรหัสรหัสดังต่อไปนี้:
//ตรวจสอบว่าเฟรมนี้เป็นเฟรมระดับบนสุดหรือไม่
ถ้า (ตัวเอง == ด้านบน) {
//ทำอะไรสักอย่าง
-
เปลี่ยนหน้าโหลดของเฟรม
การอ้างอิงถึงเฟรมคือการอ้างอิงถึงวัตถุหน้าต่าง การใช้แอตทริบิวต์ตำแหน่งของวัตถุหน้าต่าง คุณสามารถเปลี่ยนการนำทางของเฟรมได้ เช่น:
window.frames[0].location="1.html";
การดำเนินการนี้จะเปลี่ยนเส้นทางหน้าของเฟรมแรกเป็น 1.html คุณสามารถใช้ลิงก์เดียวเพื่ออัปเดตหลายเฟรมได้
คัดลอกรหัสรหัสดังต่อไปนี้:
<frameset แถว="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</เฟรมเซต>
<!--โค้ดบางส่วน-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">ลิงก์</a>
<!--โค้ดบางส่วน-->
อ้างอิงตัวแปรและฟังก์ชัน JavaScript ภายในเฟรมเวิร์กอื่น
ก่อนที่จะแนะนำเทคนิคในการอ้างอิงตัวแปรและฟังก์ชัน JavaScript ในเฟรมเวิร์กอื่น มาดูโค้ดต่อไปนี้ก่อน:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script language="JavaScript" type="text/javascript">
-
ฟังก์ชั่นสวัสดี(){
alert("สวัสดีครับอาแจ็กซ์!");
-
หน้าต่าง.สวัสดี();
-
</สคริปต์>
หากคุณเรียกใช้โค้ดนี้ หน้าต่าง "hello, ajax!" จะปรากฏขึ้น ซึ่งเป็นผลมาจากการเรียกใช้ฟังก์ชัน hello() เหตุใด hello() จึงกลายเป็นวิธีการของวัตถุ window? เนื่องจากตัวแปรโกลบอลและฟังก์ชันโกลบอลทั้งหมดที่กำหนดไว้ภายในเพจเป็นสมาชิกของวัตถุหน้าต่าง ตัวอย่างเช่น:
คัดลอกรหัสรหัสดังต่อไปนี้:
วาร์ ก=1;
การแจ้งเตือน (window.a);
กล่องโต้ตอบจะปรากฏขึ้นเพื่อแสดง 1. หลักการเดียวกันนี้ใช้กับการแบ่งปันตัวแปรและฟังก์ชันระหว่างเฟรมเวิร์กที่แตกต่างกันโดยการเรียกพวกมันผ่านวัตถุหน้าต่าง
ตัวอย่างเช่น: หน้าเรียกดูผลิตภัณฑ์ประกอบด้วยสองเฟรมย่อย ด้านซ้ายแสดงถึงลิงก์ไปยังหมวดหมู่ผลิตภัณฑ์ เมื่อผู้ใช้คลิกลิงก์หมวดหมู่ รายการผลิตภัณฑ์ที่เกี่ยวข้องจะปรากฏขึ้นทางด้านขวา สั่งซื้อ] ถัดจากผลิตภัณฑ์เพื่อเพิ่มตะกร้าสินค้า
ในตัวอย่างนี้ สามารถใช้หน้าการนำทางด้านซ้ายเพื่อจัดเก็บผลิตภัณฑ์ที่ผู้ใช้ต้องการซื้อได้ เพราะเมื่อผู้ใช้คลิกลิงก์การนำทาง หน้าอื่นจะมีการเปลี่ยนแปลงอะไรบ้าง นั่นคือ หน้าแสดงผลิตภัณฑ์ และหน้าการนำทางนั้นเอง ยังคงไม่เปลี่ยนแปลง ดังนั้นตัวแปร JavaScript จะไม่สูญหายและสามารถนำไปใช้จัดเก็บข้อมูลทั่วโลกได้ หลักการดำเนินการมีดังนี้:
สมมติว่าหน้าด้านซ้ายคือ link.html และหน้าด้านขวาคือ show.html โครงสร้างหน้าจะเป็นดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<หัว>
<title> เอกสารใหม่ </title>
</หัว>
<frameset cols="20%,80%">
<frame src="link.html" name="link" />
<frame src="show.html" name="show" />
</เฟรมเซต>
</html>
คุณสามารถเพิ่มข้อความลักษณะนี้ถัดจากผลิตภัณฑ์ที่แสดงใน show.html:
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">หยิบลงตะกร้า</a>
ลิงก์แสดงถึงกรอบงานการนำทาง อาร์เรย์ arrOrders ถูกกำหนดไว้ในหน้า link.html เพื่อจัดเก็บรหัสของผลิตภัณฑ์ ฟังก์ชัน addToOrders() ใช้เพื่อตอบสนองต่อเหตุการณ์การคลิกของลิงก์ [ซื้อ] ถัดจาก ผลิตภัณฑ์ รหัสพารามิเตอร์ที่ได้รับแสดงถึงรหัสของผลิตภัณฑ์ ตัวอย่างคือผลิตภัณฑ์ที่มี ID 32068:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script language="JavaScript" type="text/javascript">
-
var arrOrders=อาร์เรย์ใหม่();
ฟังก์ชั่น addToOrders (id) {
arrOrders.push(id);
-
-
</สคริปต์>
ด้วยวิธีนี้ คุณสามารถใช้ arrOrders ในหน้าชำระเงินหรือหน้าเรียกดูตะกร้าสินค้าเพื่อเตรียมผลิตภัณฑ์ทั้งหมดให้พร้อมสำหรับการซื้อ
กรอบงานสามารถแบ่งหน้าออกเป็นหลายโมดูลโดยมีฟังก์ชันอิสระ แต่ละโมดูลมีความเป็นอิสระจากกัน แต่สามารถเชื่อมต่อผ่านการอ้างอิงของวัตถุหน้าต่างได้ มันเป็นกลไกสำคัญในการพัฒนาเว็บ