เมื่อพูดถึง Iframe คุณอาจโยนมันเข้าไปในมุมที่ถูกลืม แต่ก็ไม่ใช่คนแปลกหน้าที่จะพูดถึงกรอบพี่ชายของมัน แท็กเฟรมคือแท็กเฟรม สิ่งที่เราเรียกว่าโครงสร้างหลายเฟรมคือการแสดงไฟล์ HTML หลายไฟล์ในหน้าต่างเบราว์เซอร์ ตอนนี้เราพบกับสถานการณ์ที่สมจริงมาก: หากมีการสอนทีละส่วนและลิงก์ไปยังส่วนก่อนหน้าและส่วนถัดไปจะถูกสร้างขึ้นในตอนท้ายของแต่ละหน้า ยกเว้นเนื้อหาที่แตกต่างกันของแต่ละส่วนเนื้อหาของส่วนอื่น ๆ ของหน้าจะเหมือนกัน หากคุณสร้างหน้าโง่ ๆ ในหน้าดูเหมือนว่าน่ารำคาญเกินไป ในเวลานี้คุณมีความคิดฉับพลัน หากมีวิธีที่จะทำให้ส่วนอื่น ๆ ของหน้าไม่เปลี่ยนแปลงและทำให้การสอนเป็นหน้าเนื้อหาแบบหน้าหน้าโดยไม่มีเนื้อหาอื่น ๆ เมื่อคลิกลิงก์เพื่อเปิดและลงให้เปลี่ยนเนื้อหาของบทช่วยสอนเท่านั้นและทำให้ผู้อื่นไม่เปลี่ยนแปลง ด้วยวิธีนี้หนึ่งคือการประหยัดเวลาและในอนาคตหากมีการเปลี่ยนแปลงในการสอนมันก็สะดวกมากดังนั้นมันจะไม่ส่งผลกระทบต่อกองทัพทั้งหมด ที่สำคัญคือดาวน์โหลดแบนเนอร์โฆษณารายการคอลัมน์การนำทางและสิ่งอื่น ๆ ที่เกือบทุกหน้าเพียงครั้งเดียวเท่านั้นและไม่ดาวน์โหลดอีกต่อไป
แท็ก IFRAME หรือที่เรียกว่าแท็กเฟรมลอยตัวสามารถใช้เพื่อฝังเอกสาร HTML ในจอแสดงผล HTML มันแตกต่างจากคุณลักษณะที่ใหญ่ที่สุดของแท็กเฟรมนั่นคือไฟล์ HTML ที่อ้างอิงโดยแท็กนี้ไม่ได้แสดงโดยไม่ขึ้นกับไฟล์ HTML อื่น แต่สามารถฝังได้โดยตรงในไฟล์ HTML ผสมกับเนื้อหาของไฟล์ HTML นี้ นอกจากนี้เนื้อหาเดียวกันสามารถแสดงบนหน้าเว็บได้หลายครั้งโดยไม่ต้องทำซ้ำเนื้อหา คำอุปมาที่สดใสคือทีวีรูปภาพในภาพ
ทีนี้มาพูดถึงการใช้แท็ก iframe
รูปแบบการใช้งานของแท็ก iframe คือ:
<iframe src = ความกว้าง url = x ความสูง = x scrolling = [ตัวเลือก] frameborder = x> </iframe>
SRC: พา ธ ไปยังไฟล์ซึ่งเป็นไฟล์ HTML หรือข้อความ, ASP, ฯลฯ ;
ความกว้างความสูง: ความกว้างและความสูงของพื้นที่รูปภาพในภาพ;
การเลื่อน: เมื่อไฟล์ HTML ที่ระบุของ SRC ไม่แสดงในพื้นที่ที่ระบุตัวเลือกการเลื่อน หากไม่ได้ตั้งค่าเป็นไม่จะไม่มีแถบเลื่อนจะปรากฏขึ้น ถ้าเป็นอัตโนมัติ: แถบเลื่อนจะปรากฏขึ้นโดยอัตโนมัติ ถ้าเป็นใช่มันจะปรากฏขึ้น;
FrameBorder: ความกว้างของเส้นขอบพื้นที่ซึ่งมักจะถูกตั้งค่าเป็น 0 เพื่อผสมผสานรูปภาพในภาพกับเนื้อหาที่อยู่ติดกัน
ตัวอย่างเช่น:
<iframe src = http: //netschool.cpcw.com/homepage width = 250 ความสูง = 200 scrolling = no frameborder = 0> </iframe>
2. การควบคุมซึ่งกันและกันระหว่างรูปแบบแม่และเฟรมลอยในภาษาสคริปต์และลำดับชั้นของวัตถุหน้าต่างที่มี iframes เรียกว่ารูปแบบหลักในขณะที่เฟรมลอยตัวเรียกว่ารูปแบบเด็ก สิ่งสำคัญคือต้องเข้าใจความสัมพันธ์ระหว่างสองสิ่งนี้เนื่องจากการเข้าถึงแบบฟอร์มเด็กในรูปแบบหลักหรือในทางกลับกันคุณต้องชัดเจนเกี่ยวกับลำดับชั้นของวัตถุเพื่อเข้าถึงและควบคุมแบบฟอร์มผ่านโปรแกรม
1. การเข้าถึงและควบคุมวัตถุในรูปแบบเด็กในรูปแบบผู้ปกครอง
ในรูปแบบผู้ปกครอง iframe นั่นคือรูปแบบเด็กเป็นวัตถุเด็กของวัตถุเอกสารและวัตถุในรูปแบบลูกสามารถเข้าถึงได้โดยตรงในสคริปต์
ตอนนี้มีคำถามนั่นคือเราจะควบคุม iframe นี้ได้อย่างไร ที่นี่เราต้องพูดคุยเกี่ยวกับวัตถุ iframe หลังจากที่เราตั้งค่าแอตทริบิวต์ ID เป็นแท็กนี้เราสามารถใช้โมเดลวัตถุเอกสาร DOM เพื่อควบคุม HTML ที่มีอยู่ใน IFRAME
ตัวอย่างเช่นฝังไฟล์ test.htm ใน example.htm และควบคุมวัตถุที่ติดแท็กบางอย่างใน test.htm:
<iframe src = test.htm id = ความกว้างทดสอบ = 250 ความสูง = 200 scrolling = no frameBorder = 0> </iframe>
รหัสไฟล์ test.htm คือ:
<html>
<body>
<h1 id = myh1> สวัสดีเด็กชายของฉัน </h1>
</body>
</html>
หากเราต้องการเปลี่ยนข้อความในแท็ก H1 ด้วยหมายเลข ID MYH1 เป็นสวัสดีที่รักแล้ว:
document.myh1.innerText = สวัสดีที่รักของฉัน (ที่เอกสารสามารถบันทึกได้)
ในไฟล์ตัวอย่าง. htm รูปแบบย่อยที่อ้างถึงโดยวัตถุแท็ก iframe นั้นสอดคล้องกับโมเดลวัตถุ DHTML ทั่วไปและวิธีการควบคุมการเข้าถึงสำหรับวัตถุเหมือนกันดังนั้นฉันจะไม่ทำซ้ำอีก
2. การเข้าถึงและควบคุมวัตถุในรูปแบบหลักในรูปแบบเด็ก
ในรูปแบบเด็กเราสามารถเข้าถึงวัตถุในหน้าต่างพาเรนต์ผ่านทางพาเรนต์เช่นวัตถุพาเรนต์ (พาเรนต์)
ตัวอย่างเช่น. htm:
<html>
<body onclick = การแจ้งเตือน (tt.myh1.innerhtml)>
<iframe name = tt src = frame1.htm width = 250 ความสูง = 200 scrolling = no frameBorder = 0> </iframe>
<h1 id = myh2> สวัสดีภรรยาของฉัน </h1>
</body>
</html>
หากคุณต้องการเข้าถึงข้อความชื่อเรื่องด้วยหมายเลข ID MYH2 ใน frame1.htm และเปลี่ยนเป็นสวัสดีเพื่อนของฉันเราสามารถเขียนได้เช่นนี้:
parent.myh2.innertext = สวัสดีเพื่อนของฉัน
ที่นี่วัตถุหลักแสดงถึงรูปแบบปัจจุบัน (แบบฟอร์มที่ตัวอย่าง. htm อยู่) คุณต้องเข้าถึงวัตถุในรูปแบบผู้ปกครองในรูปแบบเด็กและทั้งหมดจะดำเนินการผ่านวัตถุหลักโดยไม่มีข้อยกเว้น
แม้ว่า IFRAME จะถูกฝังอยู่ในไฟล์ HTML อื่น แต่ก็ยังค่อนข้างเป็นอิสระและเป็นขอบเขตของความเป็นอิสระ ลักษณะใน HTML เดียวก็เหมาะสำหรับเฟรมลอยตัว
แค่คิดว่าผ่านแท็ก iframe เราสามารถแสดงเนื้อหาที่ไม่มีการเปลี่ยนแปลงเหล่านั้นเป็น iframes เพื่อไม่ต้องทำซ้ำเนื้อหาเดียวกัน นี่เป็นเหมือนกระบวนการหรือฟังก์ชั่นในการเขียนโปรแกรมช่วยประหยัดแรงงานที่ยุ่งยากจำนวนมาก! นอกจากนี้ยังเป็นสิ่งสำคัญที่จะต้องทำการปรับเปลี่ยนหน้าเว็บที่เป็นไปได้มากขึ้นเนื่องจากคุณไม่จำเป็นต้องแก้ไขแต่ละหน้าเนื่องจากการปรับรูปแบบคุณเพียงแค่ต้องปรับเปลี่ยนรูปแบบของแบบฟอร์มพาเรนต์
สิ่งหนึ่งที่ควรทราบคือเบราว์เซอร์ Nestscape ไม่รองรับแท็ก iframe แต่ในโลกของ IE ดูเหมือนจะดี มันใช้แท็ก iframe อย่างกว้างขวางซึ่งไม่เพียง แต่พิจารณาตัวเอง (เว็บไซต์) และประหยัดค่าใช้จ่ายออนไลน์ของชาวเน็ต ทำไมไม่ทำ?
Floating Frame เป็นคำจำกัดความในข้อกำหนด HTML4.0 และเบราว์เซอร์ในปัจจุบันรองรับ
ซึ่งแตกต่างจากพาร์ติชันที่แสดงโดย Frameset เฟรมลอยตัวมีอยู่เป็นวัตถุในตัวบนหน้าเว็บและสไตล์ของมันก็เหมือนกราฟหรือแอปเพล็ตบนหน้า Floating Frame ใช้แท็ก <frame> ซึ่งมีการตั้งค่าแอตทริบิวต์เดียวกับ <frame> รวมถึง: ชื่อ, SRC, marginWidth, marginheight, frameBorder และการเลื่อน ในเวลาเดียวกันมันยังมีความสูงความกว้างและคุณสมบัติการจัดแนวเท่ากันกับกราฟิกหรือแอพพลิท
ยิ่งไปกว่านั้นเฟรมลอยตัวเป็นไปตามหลักการเป้าหมายเดียวกันกับเฟรมปกติ: เราสามารถชี้ไปที่ชื่อได้ หลักการนี้ใช้กับเฟรมลอยตัวในเฟรมทุกประเภทมิฉะนั้นจะง่ายต่อการทำ ลิงก์ที่ไม่มี traget ในเฟรมลอยอยู่เป็นจุดไปที่ตัวเองในขณะที่ลิงก์ _parent ชี้ไปที่เฟรมหรือหน้าต่างที่เอกสารที่มี <frame> อยู่ ตัวอย่างเช่น:
<iframe name = floater src = start.htm width = 150 ความสูง = 200 hspace = 10 allign = ซ้าย>
<img src = images/noframe.gif alt = คุณไม่เห็นเฟรมลอยตัว
ความกว้าง = 150 ความสูง = 200 hspace = 10 allign = ขวา>
</iframe> <br>
<a href = one.htm target = floater> แสดง one.htm </a> <p>
<a href = two.htm target = floater> แสดง two.htm </a> <p>
<a href = start.htm target = floater> นำกลับ back start.htm </a>
โปรดทราบว่าสำหรับเบราว์เซอร์ที่รองรับแท็ก <frame> เนื้อหาใด ๆ ที่อยู่ระหว่าง <frame> และ </iframe> จะถูกละเว้น แต่เนื้อหาในนั้นจะปรากฏขึ้นซึ่งสามารถใช้เพื่ออธิบายว่าเบราว์เซอร์ปัจจุบันไม่รองรับ <iframe>