วิธีการสื่อสารนั้นแตกต่างกันไปขึ้นอยู่กับว่าแอตทริบิวต์ SRC ใน IFRAME นั้นเชื่อมโยงกับลิงค์โดเมนหรือข้ามโดเมนเดียวกัน
1. การสื่อสารระหว่างหน้าพ่อกับลูกชายภายใต้โดเมนเดียวกัน
หน้าหลัก parent.html
การคัดลอกรหัสมีดังนี้:
<html>
<head>
<script type = "text/javascript">
ฟังก์ชั่นบอกว่า () {
การแจ้งเตือน ("parent.html");
-
ฟังก์ชั่น callchild () {
myFrame.window.say ();
myFrame.window.document.getElementById ("ปุ่ม"). value = "call end";
-
</script>
</head>
<body>
<input id = "ปุ่ม" type = "button" value = "เรียกฟังก์ชั่นใน child.html บอกว่า ()" onclick = "callchild ()"/>
<iframe name = "myFrame" src = "child.html"> </iframe>
</body>
</html>
เด็ก. html
การคัดลอกรหัสมีดังนี้:
<html>
<head>
<script type = "text/javascript">
ฟังก์ชั่นบอกว่า () {
การแจ้งเตือน ("child.html");
-
ฟังก์ชั่น callparent () {
parent.say ();
parent.window.document.getElementById ("ปุ่ม"). value = "Call End";
-
</script>
</head>
<body>
<input id = "ปุ่ม" type = "button" value = "เรียกฟังก์ชัน say () ใน parent.html" onclick = "callparent ()"/>
</body>
</html>
วิธีการโทร
หน้าหลักเรียกใช้วิธีหน้าเด็ก: framename.window.childmethod ();
หน้าเด็กเรียกวิธีการหน้าหลัก: parent.window.parentmethod ();
การเข้าถึงองค์ประกอบ DOM
หลังจากได้รับหน้าต่างเอกสารบันทึกของหน้าคุณสามารถเข้าถึงองค์ประกอบ DOM
สิ่งที่ควรทราบ
เพื่อให้แน่ใจว่าการดำเนินการจะดำเนินการหลังจากโหลด IFRAME หาก IFRAME ยังไม่ได้รับการโหลดให้เริ่มเรียกใช้วิธีการหรือตัวแปรภายในจะเกิดข้อผิดพลาดเกิดขึ้น มีสองวิธีในการพิจารณาว่า iframe กำลังโหลด:
1. ใช้เหตุการณ์ onload บน iframe
2. ใช้ document.readystate == "เสร็จสมบูรณ์" เพื่อตัดสิน
2. วิธีการสื่อสารหน้าผู้ปกครอง-โดเมน-โดเมน
หาก IFRAME เชื่อมโยงหน้าภายนอกวิธีการสื่อสารภายใต้ชื่อโดเมนเดียวกันไม่สามารถใช้ได้เนื่องจากกลไกความปลอดภัยไม่ได้ใช้
หน้าหลักส่งข้อมูลไปยังหน้าเด็ก
เทคนิคการใช้งานคือการใช้ค่าแฮชของวัตถุตำแหน่งและผ่านข้อมูลการสื่อสารผ่านมัน เพิ่มสตริงข้อมูลเพิ่มเติมหลังจาก SRC ของ IFRAME ในหน้าหลักและจากนั้นคุณจะได้รับข้อมูลที่นี่ได้ทันทีตัวอย่างเช่น:
1. ตั้งค่าตัวจับเวลาในหน้าย่อยผ่านวิธี setInterval ฟังการเปลี่ยนแปลงในตำแหน่ง. href เพื่อรับข้อมูลข้างต้น
2. จากนั้นหน้าย่อยจะดำเนินการประมวลผลเชิงตรรกะที่สอดคล้องกันตามข้อมูลข้อมูลนี้
หน้าเด็กส่งผ่านข้อมูลไปยังหน้าหลัก
เทคนิคการใช้งานคือการใช้พร็อกซี iframe ซึ่งฝังอยู่ในหน้าเด็กและจะต้องอยู่ในโดเมนเดียวกันกับหน้าหลัก จากนั้นมันก็ใช้หลักการการใช้งานอย่างเต็มที่ของวิธีการสื่อสารครั้งแรกข้างต้นผ่านข้อมูลของหน้าเด็กไปยังพร็อกซี iframe จากนั้นเนื่องจากพร็อกซี iframe และหน้าหลักอยู่ในโดเมนเดียวกันหน้าหลักสามารถรับข้อมูลนี้ได้โดยใช้โดเมนเดียวกัน ใช้ window.top หรือ window.parent.parent เพื่อรับการอ้างอิงไปยังวัตถุหน้าต่างระดับบนสุดของเบราว์เซอร์