หน้าที่ขององค์ประกอบ iframe คือการฝังเอกสารภายในเอกสารและสร้างเฟรมลอย หลายๆ คนไม่ค่อยเข้าใจว่า iframe ถูกควบคุมอย่างไร และโดยพื้นฐานแล้ว พวกเขายังอยู่ในสถานะความเข้าใจที่คลุมเครือ หมายเหตุสองรายการบน iframe ifr คือค่า ID และ NAME ของ iframe ที่มีอยู่: นี่คือคำพูด: หากคุณต้องการเปลี่ยน src หรือเส้นขอบ การเลื่อน และคุณลักษณะอื่นๆ ของ iframe (ซึ่งไม่ใช่แนวคิดเดียวกันกับคุณสมบัติ ไม่สามารถเขียนคุณสมบัติในแท็กได้ เช่น scrollHeight, innerHTML ฯลฯ) คุณต้อง ใช้วิธีแรก หากคุณต้องการรับเพจของ iframe (ไม่ใช่ iframe เอง) คุณต้องใช้วิธีที่สองเนื่องจากจะได้รับโมเดล DOM ที่สมบูรณ์ ตัวอย่างเช่น หากคุณต้องการรับเนื้อหาของ document.body ของ iframe คุณสามารถใช้วิธีที่สองได้เท่านั้น นอกจากนี้ โปรดทราบว่าหากคุณเรียกใช้โมเดล DOM ของ iframe เมื่อโหลดหน้า iframe ไม่สมบูรณ์ จะเกิดข้อผิดพลาดร้ายแรง ดังนั้นคุณต้องเตรียมโหมดที่ทนทานต่อข้อผิดพลาด ต่อไปนี้คือตัวอย่าง อันหนึ่งคือ aa.htm และอีกอันคือ bb.htm! อ้า.htm รหัส: ต่อไปนี้เป็นตัวอย่างที่ยกมา: bb.htm
` document.getElementById("ifr");
window.frames[“ifr”];
หากคุณต้องการใช้ฟังก์ชันใน iframe ตัวแปรจะต้องใช้วิธีที่สอง เนื่องจากต้องใช้โมเดล DOM ที่สมบูรณ์ (ฉันไม่รู้ว่านี่ถูกต้องหรือไม่)
<!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" >
<หัว>
<title>หน้าที่ไม่มีชื่อ</title>
<style type="text/css">
-
ร่างกาย{
ระยะขอบ:0px;
-
-
</สไตล์>
</หัว>
<ร่างกาย>
<iframe id="ifr" name="ifr" width="100%" height="500" src="bb.htm"></iframe>
</ร่างกาย>
</html>
<script language="javascript" type="text/javascript">
var aa_value="ฉันเป็นตัวแปรในหน้าต่างด้านบน!";
var ifr_id=document.getElementById("ifr");
var ifr_window=window.frames["ifr"];
alert("การแจ้งเตือนจากหน้าต่างด้านบน : ไม่สามารถรับตัวแปรของ iframe โดย ifr_id ได้ มันจะส่งคืน :" + ifr_id.bb_var);
alert("การแจ้งเตือนจากหน้าต่างด้านบน : ไม่สามารถรับโมเดล DOM ของ iframe โดย ifr_id มันจะส่งคืน :" + ifr_id.window);
alert("แจ้งเตือนจากหน้าต่างด้านบน : รับ src จาก id :" + ifr_id.src);
alert("การแจ้งเตือนจากหน้าต่างด้านบน : รับ href จากหน้าต่าง:" + ifr_window.document.location.href);
//เนื่องจาก bb.htm อาจยังไม่ได้โหลด การดาวน์โหลดอาจทำให้เกิดข้อผิดพลาดได้
//เรียกใช้ฟังก์ชัน ifr_window.bb() ใน iframe
//เรียกตัวแปรภายใน iframe
alert("แจ้งเตือนจากหน้าต่างด้านบน : " + ifr_window.bb_var);
-
alert("แจ้งเตือนจากหน้าต่างด้านบน :" + ifr_window.document.body.innerHTML);
ฟังก์ชั่น aa (ผงชูรส) {
alert("ฉันแจ้งเตือนจากหน้าต่างด้านบน และฉันได้รับ msg:n" + msg);
-
</สคริปต์>
รหัส: ต่อไปนี้เป็นตัวอย่างที่ยกมา:
<!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" >
<หัว>
<title>เฟรมย่อย</title>
<style type="text/css">
-
HTML,เนื้อหา{
ระยะขอบ:0px;
ความกว้าง:90%;
-
-
</สไตล์>
</หัว>
<ร่างกาย>
ฉันคือซับเฟรม!
<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
-
</ร่างกาย>
</html>
<script language="javascript" type="text/javascript">
var bb_var="ฉันเป็นตัวแปรใน ifr";
functionbb(){
alert("แจ้งเตือนจาก iframe : ฉันกำลังเฟรมฟังก์ชัน ifr")
-
//รับตัวแปรของเพจหลัก
alert("แจ้งเตือนจาก iframe parent.ifr_id::" + parent.ifr_id);
alert("การแจ้งเตือนจาก iframe parent.aa_value : " + parent.aa_value);
//เปลี่ยนความสูงของ iframe ผ่าน ifr_id ของเพจหลัก
alert("แจ้งเตือนจาก iframe : ifr's clientHeight :" +document.body.clientHeight);
parent.ifr_id.height=document.body.clientHeight;
alert("การแจ้งเตือนจาก iframe : scrollHeight ของ ifr : " + document.body.scrollHeight);
//เรียกใช้ฟังก์ชันของแบบฟอร์มหลัก:
parent.aa("ฉันจะเรียกใช้ฟังก์ชันที่เป็นของหน้าต่างด้านบน ");
//เปลี่ยนชื่อของแบบฟอร์มหลัก:
alert("Alert from iframe : ฉันจะเปลี่ยนชื่อหน้าต่าง Top");
top.document.title="ค่าหัวเรื่องมีการเปลี่ยนแปลง";
//เส้นขอบและการเลื่อนเปลี่ยนไปตาม ifr_id ของแบบฟอร์มหลัก
alert("Alert from iframe : ฉันจะเปลี่ยนเส้นขอบและการเลื่อน :");
top.ifr_id.border=0;
top.ifr_id.scrolling = "ไม่";
</สคริปต์>