เอฟเฟกต์ "ภาพซ้อนภาพ"--อภิปรายเกี่ยวกับการใช้แท็ก IFRAME
ผู้เขียน：Eve Cole
เวลาอัปเดต：2009-06-11 17:24:01
เมื่อดูจากเว็บไซต์ปัจจุบันความเร็วอินเทอร์เน็ตจะช้านิดหน่อยแต่เกือบทุกหน้ามีสิ่งที่คล้ายกันมากมาย เช่น แบนเนอร์ รูปภาพคอลัมน์ ลิขสิทธิ์ เป็นต้น แน่นอนว่าเนื่องจากความต้องการรูปแบบเว็บไซต์ที่เป็นหนึ่งเดียวและเอฟเฟกต์การโฆษณา ไม่มีอะไรผิดปกติกับมัน แต่ท้ายที่สุดแล้ว กระเป๋าเงินของผู้ใช้ก็หมดเงินมากขึ้นโดยสิ่งที่ "ตกแต่ง" เหล่านี้ มีวิธีใดที่จะทำให้สิ่งที่คล้ายกันเหล่านี้ไม่จำเป็นต้องดาวน์โหลดอีกต่อไปหลังจากดาวน์โหลดเพียงครั้งเดียว แต่ดาวน์โหลดเท่านั้น เนื้อหาเว็บในพื้นที่ที่เนื้อหามีการเปลี่ยนแปลง?
คำตอบคือแน่นอน: ใช้แท็ก Iframe!
1. การใช้แท็ก Iframe <BR> เมื่อพูดถึง Iframe คุณอาจโยนมันเข้าไปใน "มุมที่ถูกลืม" แต่เมื่อเป็นเฟรมพี่ของมัน คุณจะไม่คุ้นเคย แท็กเฟรมคือแท็กเฟรม สิ่งที่เราเรียกว่าโครงสร้างหลายเฟรมคือการแสดงไฟล์ HTML หลายไฟล์ในหน้าต่างเบราว์เซอร์ ตอนนี้เราพบกับสถานการณ์ที่สมจริงมาก: หากมีบทช่วยสอนก็จะแบ่งออกเป็นส่วน ๆ ทีละหน้า ในตอนท้ายของแต่ละหน้าจะมีลิงก์ไปยัง "ส่วนก่อนหน้า" และ "ส่วนถัดไป" ยกเว้นเนื้อหาของ แต่ละบทช่วยสอนไม่เหมือนกัน นอกจากนี้ เนื้อหาในส่วนอื่นๆ ของหน้าก็ดูน่าเบื่อเกินไปที่จะทำหน้าโง่ๆ ในเวลานี้ จู่ๆ ฉันก็คิดขึ้นมาว่าหากมีวิธีที่จะเก็บส่วนอื่นๆ ไว้ หน้าไม่เปลี่ยนแปลง เพียงแค่ทำให้บทช่วยสอนกลายเป็นหน้าเนื้อหาทีละหน้า โดยไม่มีเนื้อหาอื่นๆ เมื่อคลิกลิงก์ขึ้นและลง เฉพาะส่วนเนื้อหาบทช่วยสอนเท่านั้นที่จะเปลี่ยนไป และส่วนอื่นๆ จะไม่เปลี่ยนแปลง วิธีนี้ช่วยประหยัดเวลา และอีกอย่างคือบทช่วยสอนจะมีการเปลี่ยนแปลงแบบยาวสามครั้งและแบบสั้นสองครั้งในอนาคต ซึ่งสะดวกมากและจะไม่ส่งผลกระทบต่อทั้งกองทัพ ที่สำคัญกว่านั้นคือแบนเนอร์โฆษณา รายการคอลัมน์ การนำทางและสิ่งอื่นๆ ที่รวมอยู่ในเกือบทุกหน้าจะถูกดาวน์โหลดเพียงครั้งเดียว จากนั้นจะไม่ดาวน์โหลดอีกต่อไป
แท็ก Iframe หรือที่เรียกว่าแท็กเฟรมลอย คุณสามารถใช้แท็กนี้เพื่อฝังเอกสาร HTML ในการแสดงผล HTML ได้ คุณลักษณะที่ใหญ่ที่สุดที่แตกต่างจากแท็ก Frame คือไฟล์ HTML ที่แท็กนี้อ้างอิงจะไม่แสดงแยกจากไฟล์ HTML อื่น ๆ แต่สามารถฝังลงในไฟล์ HTML ได้โดยตรงและรวมเข้ากับเนื้อหาของไฟล์ HTML เพื่อให้เป็นภาพรวม นอกจากนี้ คุณยังสามารถแสดงเนื้อหาเดียวกันได้หลายครั้งบนหน้าเว็บโดยไม่ต้องเขียนเนื้อหาซ้ำๆ กัน คำอุปมาที่ชัดเจนก็คือทีวีแบบ "ภาพซ้อนภาพ"
ตอนนี้เรามาพูดถึงการใช้แท็ก Iframe กันดีกว่า
รูปแบบการใช้งานแท็ก Iframe คือ:
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src: เส้นทางของไฟล์ซึ่งอาจเป็นไฟล์ HTML, ข้อความ, ASP ฯลฯ ;
ความกว้าง ความสูง: ความกว้างและความสูงของพื้นที่ "รูปภาพซ้อนภาพ"
การเลื่อน: เมื่อไฟล์ HTML ที่ระบุของ SRC ไม่แสดงในพื้นที่ที่ระบุ ตัวเลือกการเลื่อนหากตั้งค่าเป็น NO แถบเลื่อนจะไม่ปรากฏขึ้น หากเป็นอัตโนมัติ: แถบเลื่อนจะปรากฏขึ้นโดยอัตโนมัติ หากเป็นใช่ มันจะปรากฏขึ้น;
FrameBorder: ความกว้างของเส้นขอบพื้นที่ เพื่อผสมผสาน "รูปภาพซ้อนภาพ" กับเนื้อหาที่อยู่ติดกัน มักจะตั้งค่าเป็น 0
ตัวอย่างเช่น:
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>
2. การควบคุมร่วมกันระหว่างฟอร์มหลักและเฟรมลอย <BR> ในภาษาสคริปต์และลำดับชั้นของวัตถุ หน้าต่างที่มี Iframe เรียกว่าฟอร์มหลัก ในขณะที่เฟรมลอยเรียกว่าฟอร์มลูก ทำให้ชัดเจนว่าทั้งสองความสัมพันธ์นี้ เป็นสิ่งสำคัญเนื่องจากในการเข้าถึงแบบฟอร์มลูกในแบบฟอร์มหลักหรือในทางกลับกัน คุณต้องทราบลำดับชั้นของออบเจ็กต์ก่อนจึงจะสามารถเข้าถึงและควบคุมแบบฟอร์มโดยทางโปรแกรมได้
1. เข้าถึงและควบคุมออบเจ็กต์ในฟอร์มย่อยในรูปแบบพาเรนต์ <BR> ในฟอร์มพาเรนต์ Iframe ซึ่งก็คือฟอร์มย่อยนั้นเป็นออบเจ็กต์ลูกของออบเจ็กต์เอกสาร คุณสามารถเข้าถึงออบเจ็กต์ในฟอร์มย่อยได้โดยตรง สคริปต์
ตอนนี้มีคำถามคือ เราจะควบคุม 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. เข้าถึงและควบคุมวัตถุในรูปแบบพาเรนต์ในฟอร์มย่อย <BR> ในฟอร์มย่อย เราสามารถเข้าถึงออบเจ็กต์ในหน้าต่างพาเรนต์ผ่านวัตถุพาเรนต์ (พาเรนต์)
เช่น example.htm:
<html>
<body onclick="alert(tt.myH1.innerHTML)">
<ชื่อ Iframe="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">สวัสดีภรรยาของฉัน</h1>
</ร่างกาย>
</html>
หากเราต้องการเข้าถึงข้อความชื่อเรื่องใน frame1.htm ด้วยหมายเลข ID myH2 และเปลี่ยนเป็น "hello,my friend" เราสามารถเขียนได้ดังนี้ parent.myH2.innerText="hello,my friend"
ที่นี่วัตถุหลักแสดงถึงรูปแบบปัจจุบัน (รูปแบบที่มี example.htm) หากต้องการเข้าถึงวัตถุในรูปแบบหลักในแบบฟอร์มย่อย จะทำผ่านวัตถุหลักโดยไม่มีข้อยกเว้น
แม้ว่า Iframe จะถูกฝังอยู่ในไฟล์ HTML อื่น แต่ยังคงค่อนข้างเป็นอิสระและเป็น "อาณาจักรอิสระ" ลักษณะเฉพาะใน HTML เดียวยังใช้กับเฟรมลอยอีกด้วย
ลองนึกภาพด้วยแท็ก Iframe เราสามารถแสดงเนื้อหาที่ไม่เปลี่ยนแปลงเป็น Iframe ได้ ด้วยวิธีนี้ เราไม่จำเป็นต้องเขียนเนื้อหาเดียวกันซ้ำๆ นี่เป็นเหมือนกระบวนการหรือฟังก์ชันในการเขียนโปรแกรมและจะน่าเบื่อขนาดไหน ประหยัดแรงงานคน! นอกจากนี้ และที่สำคัญคือ ทำให้การแก้ไขเพจเป็นไปได้มากขึ้น เนื่องจากแทนที่จะต้องแก้ไขแต่ละเพจเพื่อปรับเค้าโครง คุณเพียงแค่ต้องแก้ไขโครงร่างของฟอร์มหลักเพียงฟอร์มเดียวเท่านั้น
สิ่งหนึ่งที่ควรทราบก็คือเบราว์เซอร์ Nestscape ไม่รองรับแท็ก Iframe แต่ในโลกปัจจุบันของ IE ดูเหมือนจะไม่ใช่เรื่องใหญ่ แท็ก Iframe มีการใช้กันอย่างแพร่หลาย ไม่เพียงแต่เพื่อประโยชน์ของตัวเองเท่านั้น (เว็บไซต์) แต่เพื่อให้ชาวเน็ตประหยัดค่าอินเทอร์เน็ตด้วย
