ตัวอย่างบทความนี้อธิบายถึงวิธีการของหน้าเด็ก Iframe ที่ฝังตัวและการสื่อสารหน้าหลัก JS แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
วิธีการสื่อสารระหว่างหน้าและหน้าหลักในเฟรมเวิร์ก iframe นั้นแตกต่างกันอย่างชัดเจนขึ้นอยู่กับว่าแอตทริบิวต์ SRC ใน iframe เชื่อมโยงกับลิงค์โดเมนเดียวกันหรือลิงค์ข้ามโดเมนเดียวกัน Data Exchange และ DOM Element การเข้าถึงร่วมกันในโดเมนเดียวกันนั้นง่ายกว่ามากในขณะที่ Cross-Domain ต้องการวิธีการที่ฉลาดในการสื่อสาร
1. การสื่อสารระหว่างหน้าพ่อกับลูกชายภายใต้โดเมนเดียวกัน
หน้าหลัก parent.html:
คัดลอกรหัสดังนี้: <html>
<head>
<script type = "text/javascript">
ฟังก์ชั่นบอกว่า () {
การแจ้งเตือน ("parent.html ------> ฉันอยู่ที่ parent.html");
-
ฟังก์ชั่น callchild ()
-
//document.frames frames"myframe" like.window.say();// ใช้เฉพาะกับเบราว์เซอร์ IE
myFrame.window.say ();
myFrame.window.document.getElementById ("ปุ่ม"). value = "ฉันเปลี่ยน";
-
</script>
</head>
<body>
<อินพุต type = button value = "callChild ()">
<iframe name = "myFrame" src = "child.html"> </iframe>
</body>
</html>
subpage child.html:
คัดลอกรหัสดังนี้: <html>
<head>
<script type = "text/javascript">
ฟังก์ชั่นบอกว่า ()
-
การแจ้งเตือน ("child.html ---> ฉันอยู่ที่ child.html");
-
ฟังก์ชั่น callparent () {
parent.say ();
parent.window.document.getElementsByName ("myFrame") [0] .style.height = "100px";
-
</script>
</head>
<body>
<อินพุต id = "ปุ่ม" type = value = "เรียกฟังก์ชัน say () ใน parent.html" onclick = "callparent ()">>
</body>
</html>
วิธีการโทร
ดังที่แสดงในตัวอย่างข้างต้นวิธีการเรียกหน้าลูกของหน้าหลักสามารถใช้งานได้โดย: framename.window.childmethod (); (วิธีนี้เข้ากันได้กับเบราว์เซอร์ต่างๆ)
วิธีการของหน้าเด็กที่เรียกหน้าหลัก: parent.window.parentmethod ();
การเข้าถึงองค์ประกอบ DOM
หลังจากได้รับวัตถุหน้าต่างลูกตาม framename.window การเข้าถึงองค์ประกอบ DOM ไม่แตกต่างจากการเข้าถึงองค์ประกอบ DOM ในหน้าเดียวกัน คุณสามารถคัดลอกรหัสดังต่อไปนี้: document.getElementById (), document.getElementByName () [ดัชนี] ตัวอย่างเช่นคัดลอกรหัสดังต่อไปนี้: parent.window.document.getElementSbyName ("myFrame") [0];
myFrame.window.document.getElementById ("ปุ่ม") สามารถละเว้น windows
สิ่งที่ควรทราบ
เพื่อให้แน่ใจว่าการดำเนินการจะดำเนินการหลังจากโหลด IFRAME หากไม่ได้โหลด IFRAME มันจะทำให้เกิดข้อผิดพลาดอย่างไม่ต้องสงสัย มีสองวิธีในการพิจารณาว่า iframe ได้รับการโหลดหรือไม่:
1. ใช้เหตุการณ์ onload บน iframe;
2. ใช้ document.readystate == "เสร็จสมบูรณ์" เพื่อตัดสิน
2. วิธีการสื่อสารหน้าผู้ปกครอง-โดเมน-โดเมน
หาก IFRAME เชื่อมโยงหน้าภายนอกวิธีการสื่อสารภายใต้ชื่อโดเมนเดียวกันไม่สามารถใช้เนื่องจากกลไกความปลอดภัย
หน้าหลักส่งข้อมูลไปยังหน้าเด็ก
เทคนิคการใช้งานคือการใช้ค่าแฮชของวัตถุตำแหน่งและผ่านข้อมูลการสื่อสารผ่านมัน เราจำเป็นต้องเพิ่มสตริง #Data เพิ่มเติมหลังจาก SRC ของ IFRAME (ข้อมูลคือข้อมูลที่คุณต้องการผ่าน) จากนั้นรับข้อมูลด้วยวิธีที่แน่นอนในหน้าเด็ก ในความเป็นจริงวิธีทั่วไปคือ:
1. ตั้งค่าตัวจับเวลาในหน้าย่อยโดยใช้เมธอด setInterval เพื่อรับฟังการเปลี่ยนแปลงใน location.href เพื่อรับข้อมูลข้างต้น
2. จากนั้นหน้าย่อยสามารถดำเนินการประมวลผลแบบลอจิคัลที่สอดคล้องกันตามข้อมูลข้อมูลนี้
หน้าเด็กส่งผ่านข้อมูลไปยังหน้าหลัก
เทคนิคการใช้งานคือการใช้พร็อกซี iframe C ซึ่งฝังอยู่ในหน้าเด็กและจะต้องอยู่ในโดเมนเดียวกันกับหน้าหลัก จากนั้นเราสามารถส่งข้อมูลของหน้าเด็กไปยัง IFRAMEC ผ่านมันโดยใช้มันเพื่อใช้หลักการการใช้งานอย่างเต็มที่ของวิธีการสื่อสารครั้งแรกข้างต้น คำถามต่อไปคือวิธีการปล่อยให้ IFRAMEC ส่งข้อมูลไปยังหน้าหลัก A เนื่องจาก IFRAMEC และหน้าหลักอยู่ในโดเมนเดียวกันมันจะง่ายกว่ามากที่จะส่งผ่านข้อมูลระหว่างพวกเขาซึ่งเป็นปัญหาการสื่อสารภายใต้ชื่อโดเมนเดียวกัน ตามที่กล่าวไว้ก่อนหน้านี้ที่นี่คุณสามารถใช้หน้าต่างคุณสมบัติที่ใช้บ่อยท็อป (ยังสามารถใช้ window.parent.parent) ซึ่งส่งกลับการอ้างอิงไปยังวัตถุหน้าต่างระดับบนที่โหลดลงในเบราว์เซอร์เพื่อให้เราสามารถใช้วิธีการโดยตรงในหน้าหลัก
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน