เมื่อดูจากเว็บไซต์ปัจจุบันความเร็วอินเทอร์เน็ตจะช้านิดหน่อยแต่เกือบทุกหน้ามีสิ่งที่คล้ายกันมากมาย เช่น แบนเนอร์ รูปภาพคอลัมน์ ลิขสิทธิ์ เป็นต้น แน่นอนว่าเนื่องจากความต้องการรูปแบบเว็บไซต์ที่เป็นหนึ่งเดียวและเอฟเฟกต์การโฆษณา ไม่มีอะไรผิดปกติกับมัน แต่ท้ายที่สุดแล้ว กระเป๋าเงินของผู้ใช้ก็หมดเงินมากขึ้นโดยสิ่งที่ "ตกแต่ง" เหล่านี้ มีวิธีใดที่จะป้องกันไม่ให้สิ่งที่คล้ายกันเหล่านี้ถูกดาวน์โหลดอีกครั้งหลังจากดาวน์โหลดเพียงครั้งเดียวและดาวน์โหลดเท่านั้น เนื้อหาเว็บในพื้นที่ที่เนื้อหามีการเปลี่ยนแปลง?
คำตอบคือแน่นอน: ใช้แท็ก Iframe!
1. การใช้แท็ก Iframe
เมื่อพูดถึง Iframe คุณอาจโยนมันไปที่ "มุมที่ถูกลืม" ไปแล้ว แต่เมื่อเป็นเรื่องของ Frame น้องชายของมัน คุณจะไม่คุ้นเคยอีกต่อไป แท็กเฟรมคือแท็กเฟรม สิ่งที่เราเรียกว่าโครงสร้างหลายเฟรมคือการแสดงไฟล์ 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. การควบคุมร่วมกันระหว่างแบบฟอร์มหลักและเฟรมลอย
ในภาษาสคริปต์และลำดับชั้นของวัตถุ หน้าต่างที่มี 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 มีการใช้กันอย่างแพร่หลาย ไม่เพียงแต่เพื่อประโยชน์ของตัวเองเท่านั้น (เว็บไซต์) แต่เพื่อให้ชาวเน็ตประหยัดค่าอินเทอร์เน็ตด้วย