หน้าที่ขององค์ประกอบ iframe คือการฝังเอกสารภายในเอกสารและสร้างเฟรมลอย หลายๆ คนไม่ค่อยเข้าใจว่า iframe ถูกควบคุมอย่างไร และโดยพื้นฐานแล้ว พวกเขายังอยู่ในสถานะความเข้าใจที่คลุมเครือ
หมายเหตุสองประการบน iframes ifr คือค่า ID และ NAME ของ iframe ที่มีอยู่:
ต่อไปนี้เป็นส่วนที่ยกมา:
` document.getElementById("ifr");
window.frames[“ifr”];
สมบูรณ์
(ฉันไม่รู้ว่าวิธีนี้ถูกต้องหรือไม่)
เพียงต้องการเปลี่ยน src หรือเส้นขอบของ iframe การเลื่อน และคุณลักษณะอื่นๆ (ซึ่งไม่ใช่แนวคิดเดียวกับคุณสมบัติ คุณสมบัติไม่สามารถเขียนเป็นแท็กได้ เช่น scrollHeight, innerHTML ฯลฯ) คุณต้องใช้วิธีแรก
หากคุณต้องการรับหน้าของ iframe ( ไม่ใช่ iframe เอง) คุณต้องใช้วิธีที่สองเนื่องจากได้รับโมเดล DOM ที่สมบูรณ์ ตัวอย่างเช่น หากคุณต้องการรับเนื้อหาของ document.body ของ iframe คุณสามารถใช้วิธีที่สองได้เท่านั้น
นอกจากนี้ โปรดทราบว่าหากโหลดเพจ iframe ไม่สมบูรณ์ จะเกิดข้อผิดพลาดร้ายแรงเมื่อเรียกโมเดล DOM ของ iframe ดังนั้น คุณต้องเตรียมโหมดที่ทนทานต่อข้อผิดพลาด
ต่อไปนี้คือตัวอย่าง อันหนึ่งคือ aa.htm และอีกอันคือ bb.htm
โค้ดaa .htm
: ต่อไปนี้เป็นส่วนของเครื่องหมายคำพูด:
<!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);
-
</script>
bb.htm
รหัส: ต่อไปนี้เป็นตัวอย่างที่ยกมา:
<!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 = "ไม่";
</สคริปต์>