แท็ก HTML <iframe> ใช้สำหรับฝังเอกสารเว็บเข้าไปในหน้าเว็บ เอกสารที่ฝังอาจเป็น PDF, หน้าเว็บ, หรือทรัพยากรอื่นๆ แอตทริบิวต์ src จะกำหนดตำแหน่งของทรัพยากรที่ฝัง
คุณสามารถฝังเนื้อหาของเอกสารเว็บหนึ่ง เช่น PDF หรือแผนที่จาก Google Maps เข้าไปในอีกหน้าหนึ่งได้ โดยใช้ HTML
ที่นี่คือที่มาของแท็ก HTML <iframe> แท็ก <iframe> ใช้สำหรับฝังวัตถุภายนอก เช่น หน้าเว็บอื่นๆ เข้าไปในหน้าเว็บเดียว บทช่วยสอนนี้จะอธิบายพร้อมตัวอย่างวิธีใช้แท็ก HTML <iframe> เพื่อฝังทรัพยากรเว็บเข้าไปในหน้าเว็บ
HTML Iframe คืออะไร
HTML Iframe หรือ Inline Frame ใช้แสดงเอกสารเว็บภายนอกบนหน้าเว็บ คุณสามารถฝังแผนที่, PDF, วิดีโอ, หรือทรัพยากรอื่นๆ โดยใช้แท็ก HTML <iframe>
โค้ดที่เก็บอยู่ภายใน Inline Frame จะเป็นอิสระจากส่วนที่เหลือของหน้าเว็บ สไตล์หรือ JavaScript ใดๆ ที่ใช้กับหน้าเว็บของคุณจะไม่ถูกนำไปใช้ภายใน Iframe
นี่คือไวยากรณ์ของแท็ก HTML <iframe>:
<iframe src="url"></iframe>
แท็ก <iframe> ใช้สร้าง Iframe เราได้ระบุแอตทริบิวต์ src ของ Iframe แอตทริบิวทีนี้มีตำแหน่งขององค์ประกอบ HTML ที่เราต้องการฝัง นี่ควรเป็น URL ของ HTML
ตัวอย่างโค้ด HTML Iframe
มาดูตัวอย่างเพื่อดูว่าแท็ก <iframe> ทำงานอย่างไร
81% ของผู้เข้าร่วมระบุว่ารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสงานทางเทคโนโลยีหลังจากเข้าร่วมบูทแคมป์ ได้รับการจับคู่กับบูทแคมป์วันนี้
นักศึกษาจบบูทแคมป์เฉลี่ยใช้เวลาน้อยกว่า 6 เดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มบูทแคมป์จนหางานแรก
สมมติว่าเรากำลังสร้างเว็บไซต์สำหรับสมาคมประวัติศาสตร์ท้องถิ่นในวอชิงตัน ดี.ซี. พวกเขาต้องการให้เราสร้างหน้าที่มีวิดีโอฝังจาก Khan Academy เกี่ยวกับการประสูติของรัฐธรรมนูญสหรัฐอเมริกา หน้านี้เป็นวัสดุแนะนำสำหรับผู้สนใจเข้าร่วมสมาคม เราสามารถใช้โค้ดต่อไปนี้เพื่อฝังวิดีโอลงในเว็บไซต์:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
โค้ดของเราส่งคืน:
เราใช้องค์ประกอบ <iframe> เพื่อฝังทรัพยากรเว็บภายนอกเข้าไปในหน้าเว็บของเรา ทรัพยากรเว็บที่เราฝังคือลิงก์ "https://www.youtube.com/embed/Rk8dCnKIfP4" ซึ่งชี้ไปที่วิดีโอที่สมาคมประวัติศาสตร์ต้องการแสดงบนเว็บไซต์ของพวกเขา
ความสูงและความกว้างของ HTML Iframe
แอตทริบิวต์ height และ width ใช้ตั้งค่าขนาดของ Iframe สมมติว่าสมาคมประวัติศาสตร์วอชิงตัน ดี.ซี. ต้องการให้เราทำให้วิดีโอนี้ใหญ่ขึ้นบนเว็บไซต์ของพวกเขา
เราจะตั้งค่าความกว้างของวิดีโอ YouTube เป็น 500 พิกเซล และความสูงเป็น 300 พิกเซล:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
โค้ดของเราส่งคืน:
วิดีโอที่ฝังของเราตอนนี้กว้าง 500 พิกเซล และสูง 300 พิกเซลบนเอกสาร HTML นี่ทำให้คนดูวิดีโอบนเว็บไซต์ง่ายขึ้น
ทางเลือกอื่น เราสามารถตั้งค่าความกว้างและความสูงของแท็ก iframe โดยใช้ CSS ได้ แต่เพราะ HTML รองรับแอตทริบิวต์ height และ width แล้ว จึงไม่จำเป็น
ลบขอบของ HTML Iframe
เมื่อทำงานกับแท็ก <iframe> คุณจะสังเกตว่าเนื้อหาของมันถูกล้อมรอบด้วยขอบ หากต้องการลบขอบนี้ คุณสามารถใช้แอตทริบิวต์ CSS border: none;
สมาคมประวัติศาสตร์ขอให้เราลบขอบรอบวิดีโอ YouTube จากเว็บไซต์ของพวกเขา นี่คือโค้ดที่เราจะใช้เพื่อลบขอบ:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4" style="border:none;"></iframe>
โค้ดของเราส่งคืน:
วิดีโอของเราตอนนี้ไม่มีขอบแล้ว
เป้าหมายลิงก์ของ HTML Iframe
นอกจากนี้ แท็ก <iframe> ยังสามารถใช้เป็นเฟรมเป้าหมายสำหรับลิงก์ได้ เราสามารถตั้งค่า Iframe ให้เป็นเฟรมเป้าหมายสำหรับลิงก์โดยใช้แอตทริบิวต์ target ในลิงก์ HTML แอตทริบิวต์ target ต้องอ้างอิงถึงแอตทริบิวต์ name ของ <iframe>
สมมติว่าสมาคมประวัติศาสตร์มีอีกวิดีโอหนึ่งที่ต้องการให้เราแสดงบนเว็บไซต์เกี่ยวกับมาตรา 1 ของรัฐธรรมนูญสหรัฐอเมริกา วิดีโอนี้ก็เผยแพร่โดย Khan Academy เช่นกัน
เมื่อคลิกข้อความ Birth บนหน้าเว็บ วิดีโอ Birth of the U.S. Constitution ควรแสดงใน Iframe เมื่อคลิกข้อความ Article I วิดีโอเกี่ยวกับมาตรา 1 ของรัฐธรรมนูญควรแสดง
เราสามารถใช้โค้ดต่อไปนี้เพื่อทำภารกิจนี้:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4" name="iframe1"></iframe><br /> <a href="https://www.youtube.com/embed/Rk8dCnKIfP" target="iframe1">Birth</a><br /> <a href="https://www.youtube.com/embed/CIFBjZU55so" target="iframe1">Article I</a>
โค้ดของเราส่งคืน:
โดยค่าเริ่มต้น วิดีโอเกี่ยวกับการประสูติของรัฐธรรมนูญสหรัฐอเมริกาจะแสดงใน Iframe เนื้อหาของ Iframe จะเปลี่ยนไปชี้ไปที่วิดีโอจาก Khan Academy เกี่ยวกับมาตรา 1 ของรัฐธรรมนูญ เมื่อเราคลิกที่ URL Article I
Iframe ของเราจะถูกเปลี่ยนเส้นทางไปที่วิดีโอเกี่ยวกับการประสูติของรัฐธรรมนูญ หากวิดีโอนั้นยังไม่ได้แสดงอยู่ เมื่อเราคลิก Birth
สรุป
แท็ก HTML <iframe> ฝังทรัพยากรเว็บภายนอก เช่น หน้าเว็บ เข้าไปในอีกหน้าเว็บหนึ่ง นี่มีประโยชน์หากคุณต้องการเพิ่มแผนที่, ไฟล์, วิดีโอ, หรือหน้าเว็บอื่นๆ ลงในเว็บไซต์ของคุณ
บทช่วยสอนนี้อธิบายพร้อมตัวอย่างอ้างอิง วิธีใช้แท็ก HTML <iframe> เพื่อแสดงทรัพยากรเว็บภายนอกบนหน้าเว็บ ตอนนี้คุณมีความรู้ที่จำเป็นเพื่อเริ่มใช้แท็ก <iframe> อย่างมืออาชีพแล้ว!
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโค้ดใน HTML อ่านคู่มือของเราเกี่ยวกับการเรียนรู้ HyperText Markup Language
