ZZzzz~ อาจเลื่อน
<Iframe src="/URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src: เส้นทางของไฟล์ซึ่งอาจเป็นไฟล์ HTML, ข้อความ, ASP ฯลฯ ;
ความกว้าง ความสูง: ความกว้างและความสูงของพื้นที่ "รูปภาพซ้อนภาพ"
การเลื่อน: เมื่อไฟล์ HTML ที่ระบุของ SRC ไม่แสดงในพื้นที่ที่ระบุ ตัวเลือกการเลื่อนหากตั้งค่าเป็น NO แถบเลื่อนจะไม่ปรากฏขึ้น หากเป็นอัตโนมัติ: แถบเลื่อนจะปรากฏขึ้นโดยอัตโนมัติ หากเป็นใช่ มันจะปรากฏขึ้น;
frameborder: ความกว้างของเส้นขอบพื้นที่ เพื่อผสมผสาน "ภาพซ้อนภาพ" กับเนื้อหาที่อยู่ติดกัน มักจะตั้งค่าเป็น 0
ตัวอย่างเช่น:
<Iframe src=" http://www.xyz.com/xyz "; width="250" height="200" scrolling="no" frameborder="0"></iframe>
ระหว่างหน้าต่างและลอย ในภาษาสคริปต์และลำดับชั้นของวัตถุ หน้าต่างที่มี Iframe เรียกว่าฟอร์มหลัก และเฟรมลอยเรียกว่าฟอร์มลูก สิ่งสำคัญคือต้องชี้แจงความสัมพันธ์ระหว่างทั้งสอง เนื่องจากจำเป็นต้องควบคุม Iframe ในตัว แบบฟอร์มหลัก เมื่อเข้าถึงฟอร์มย่อยหรือในทางกลับกัน คุณต้องทราบลำดับชั้นของวัตถุก่อนจึงจะสามารถเข้าถึงและควบคุมแบบฟอร์มผ่านโปรแกรมได้
1. เข้าถึงและควบคุมออบเจ็กต์ในฟอร์มย่อยในฟอร์มพาเรนต์ ในฟอร์มพาเรนต์ ซึ่งก็คือฟอร์มย่อย จะเป็นออบเจ็กต์ย่อยของออบเจ็กต์เอกสาร .
ตอนนี้มีคำถามคือ เราจะควบคุม Iframe นี้ได้อย่างไร ที่นี่เราต้องพูดถึงวัตถุ Iframe เมื่อเราตั้งค่าแอตทริบิวต์ ID ให้กับแท็กนี้ เราสามารถดำเนินการชุดการควบคุมบน HTML ที่มีอยู่ใน Iframe ผ่านทาง Document Object Model DOM
ตัวอย่างเช่น ฝังไฟล์ test.htm ใน example.htm และควบคุมออบเจ็กต์แท็กบางรายการใน test.htm:
<Iframe src="test.htm" id="ทดสอบ" width="250" height="200" scrolling="no" frameborder="0"></iframe>
รหัสไฟล์ test.htm คือ:
<html>
<ร่างกาย>
<h1 id="myH1">สวัสดีเด็กน้อย</h1>
</ร่างกาย>
</html>
หากเราต้องการเปลี่ยนข้อความในแท็ก H1 ด้วยหมายเลข ID myH1 เป็นสวัสดีที่รัก เราสามารถใช้:
document.myH1.innerText="hello,my dear"(สามารถละเว้นเอกสารได้)
ในไฟล์ example.htm ฟอร์มย่อยที่วัตถุ Iframe ชี้ไปนั้นสอดคล้องกับโมเดลวัตถุ DHTML ทั่วไป และวิธีการควบคุมการเข้าถึงวัตถุก็เหมือนกัน ดังนั้นฉันจะไม่ลงรายละเอียด
2. เข้าถึงและควบคุมออบเจ็กต์ในฟอร์มพาเรนต์ในฟอร์มลูก ในฟอร์มลูก เราสามารถเข้าถึงออบเจ็กต์ในหน้าต่างพาเรนต์ผ่านออบเจ็กต์พาเรนต์ (พาเรนต์)
เช่น example.htm:
<html>
<body onclick="alert(tt.myH1.innerHTML)"> <Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"> </iframe>
<h1 id="myH2">สวัสดีภรรยาของฉัน</h1>
</ร่างกาย>
</html>
หากเราต้องการเข้าถึงข้อความชื่อเรื่องใน frame1.htm ด้วยหมายเลข ID myH2 และเปลี่ยนเป็น "สวัสดีเพื่อนของฉัน" เราสามารถเขียนได้ดังนี้:
parent.myH2.innerText="สวัสดีเพื่อนของฉัน"
ที่นี่วัตถุหลักแสดงถึงรูปแบบปัจจุบัน (รูปแบบที่มี example.htm) หากต้องการเข้าถึงวัตถุในรูปแบบหลักในแบบฟอร์มย่อย จะทำผ่านวัตถุหลักโดยไม่มีข้อยกเว้น
แม้ว่า Iframe จะถูกฝังอยู่ในไฟล์ HTML อื่น แต่ยังคงค่อนข้างเป็นอิสระและเป็น "อาณาจักรอิสระ" ลักษณะเฉพาะใน HTML เดียวยังใช้กับเฟรมลอยอีกด้วย
ลองนึกภาพด้วยแท็ก Iframe เราสามารถแสดงเนื้อหาที่ไม่เปลี่ยนแปลงเป็น Iframe ได้ ด้วยวิธีนี้ เราไม่จำเป็นต้องเขียนเนื้อหาเดียวกันซ้ำๆ นี่เป็นเหมือนกระบวนการหรือฟังก์ชันในการเขียนโปรแกรมและจะน่าเบื่อขนาดไหน ประหยัดแรงงานคน! นอกจากนี้ และที่สำคัญคือ ทำให้การแก้ไขเพจเป็นไปได้มากขึ้น เนื่องจากแทนที่จะต้องแก้ไขแต่ละเพจเพื่อปรับเค้าโครง คุณเพียงแค่ต้องแก้ไขโครงร่างของฟอร์มหลักเพียงฟอร์มเดียวเท่านั้น
โปรดทราบว่าเวอร์ชันก่อน Nestscape 6.0 ไม่รองรับแท็ก Iframe
ตัวอย่าง:
<iframe src="Page" width="Width" height="Height" align="The allowance can be left or right, center" scrolling="If there is a scroll bar, fill in no or yes">< /iframe>
< IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no
name=main src="/bgm/bgm.html" width=300></IFRAME>
หลังจากใช้ iframe พบว่าแถบเลื่อนไม่สวยงามเลยขอใช้ 2 ภาพแทน↑↓
สิ่งนี้จะเกิดขึ้นได้อย่างไร?
คำตอบ:
แทนที่ <title>..</title> ของหน้าเว็บด้วยโค้ดต่อไปนี้
<ภาษาสคริปต์="จาวาสคริปต์">
ฟังก์ชั่นเลื่อน (n)
{อุณหภูมิ=n;
Out1.scrollTop=Out1.scrollTop+temp;
ถ้า (temp==0) กลับ;
setTimeout("เลื่อน(อุณหภูมิ)",80);
-
</สคริปต์>
<ความกว้างของตาราง="330">
<TR>
<TD WIDTH="304" VALIGN="ด้านบน" ROWSPAN="2" >
<DIV ID=Out1 STYLE="width:100%; height:100;overflow: ซ่อน ;border-style:dashed;border-width:
1px,1px,1px,1px;">
ข้อความ<BR> ข้อความ<BR>
ข้อความ<BR>
ข้อความ<BR>
คำ
<บีอาร์>
<บีอาร์>
</DIV>
</TD>
< TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT ="20" onmouseover="scroll(-1)" onmouseout="scroll(0) " onmousedown="scroll (-3)" BORDER="0" ALT="การกดเมาส์จะทำให้เร็วขึ้น! "></TD>
</TR>
<TR>
< TD WIDTH="14" VALIGN="ด้านล่าง"><IMG SRC="photo/down0605.gif" onmouseover ="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER= "0" WIDTH ="15" HEIGHT="21" ALT="กดเมาส์ลงเพื่อทำให้เร็วขึ้น!"></TD>
</TR>
</TABLE>
โค้ดต่อไปนี้สามารถใช้ความสูงที่ปรับได้ของ IFrame กล่าวคือ จะปรับตามความยาวของหน้าโดยอัตโนมัติ เพื่อหลีกเลี่ยงไม่ให้แถบเลื่อนปรากฏบนหน้าและ IFrame ในเวลาเดียวกัน
ซอร์สโค้ดจะเป็นดังนี้
<script type="text/javascript">
//** iframe จะปรับให้เข้ากับหน้าโดยอัตโนมัติ**//
//กรอกรายชื่อ iframe ที่คุณต้องการปรับความสูงโดยอัตโนมัติตามความสูงของหน้า
//แยก ID ของแต่ละ iframe ด้วยเครื่องหมายจุลภาค เช่น ["myframe1", "myframe2"] มีได้เพียงรูปแบบเดียว ดังนั้นจึงไม่จำเป็นต้องใช้เครื่องหมายจุลภาค
//กำหนด ID ของ iframe
var iframeids=["test"]
//หากเบราว์เซอร์ของผู้ใช้ไม่รองรับ iframe ไม่ว่าจะซ่อน iframe หรือไม่ ใช่ หมายถึง ซ่อนอยู่ ไม่ใช่ หมายถึง ไม่ได้ซ่อนอยู่
var iframehide = "ใช่"
ฟังก์ชัน dyniframesize ()
-
var dyniframe=อาร์เรย์ใหม่()
สำหรับ (i=0; i<iframeids.length; i++)
-
ถ้า (document.getElementById)
-
// ปรับความสูงของ iframe โดยอัตโนมัติ
dyniframe[dyniframe.length] = document.getElementById(iframeids);
ถ้า (dyniframe && !window.opera)
-
dyniframe.style.display = "บล็อก"
ถ้า (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) // หากเบราว์เซอร์ของผู้ใช้คือ NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
อย่างอื่นถ้า (dyniframe.Document && dyniframe.Document.body.scrollHeight) // หากเบราว์เซอร์ของผู้ใช้คือ IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
-
-
//ตามพารามิเตอร์ที่ตั้งไว้ จัดการปัญหาการแสดงผลของเบราว์เซอร์ที่ไม่รองรับ iframe
ถ้า ((document.all || document.getElementById) && iframehide=="ไม่ใช่")
-
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display = "บล็อก"
-
-
}
ถ้า (window.addEventListener)
window.addEventListener("โหลด", dyniframesize, false)
อย่างอื่นถ้า (window.attachEvent)
window.attachEvent("onload", dyniframesize)
อื่น
window.onload=dyniframesize
</script>
URL อื่น ๆ ที่มีค่าอ้างอิง:
http://www.webshu.com/tutorial/tor/7,id=0408.htm //การใช้งาน iframe ที่ฝังอยู่ในหน้าเว็บ
http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html // วัตถุ IFRAME
http://www.hoyo.idv.tw/web-program/html/iframe.htm // iframe เฟรมแบบอินไลน์