Iframes เป็นองค์ประกอบ HTML ที่ให้คุณฝังเนื้อหาภายนอก เช่น หน้าเว็บ ภายในหน้าปัจจุบัน ในบทความนี้ เราจะแสดงวิธีเปลี่ยนเนื้อหาของ iframe ตั้งแต่สองรายการขึ้นไปโดยใช้ปุ่มเดียวโดยใช้ JavaScript

ไอเฟรมคืออะไร?

iframe เป็นองค์ประกอบ HTML ที่สามารถฝังเนื้อหาภายนอกลงในหน้าเว็บ คุณสามารถใช้ฉลาก เพื่อฝังหน้าเว็บ วิดีโอ เอกสาร หรือเนื้อหามัลติมีเดียอื่นๆ บนเว็บไซต์ของคุณ โครงสร้างพื้นฐานของ iframe มีดังนี้:

เมื่อใช้ JavaScript คุณสามารถแก้ไขเนื้อหาของ iframes ได้แบบไดนามิก ซึ่งมอบประสบการณ์ผู้ใช้แบบโต้ตอบและราบรื่นยิ่งขึ้น

ตัวอย่างวิธีเปลี่ยนเนื้อหาของ iframe หลายรายการจากปุ่มเดียว

ในตัวอย่างต่อไปนี้ เราแสดงวิธีเปลี่ยนเนื้อหาของ iframe สามรายการโดยใช้ปุ่มเดียวโดยใช้ JavaScript:

ฟังก์ชัน changeContent() {
document.getElementById("iframe1").src = "new_page1.html";
document.getElementById("iframe2").src = "new_page2.html";
document.getElementById("iframe3").src = "new_page3.html";

ในตัวอย่างนี้ เราได้สร้าง iframe สามรายการที่มีรหัส iframe1, iframe2 และ iframe3 ที่ฝัง page1.html, page2.html และ page3.html ตามลำดับ ต่อไป เราได้สร้างปุ่มที่เมื่อคลิกแล้ว จะดำเนินการฟังก์ชัน เนื้อหาการเปลี่ยนแปลง (). ฟังก์ชั่นนี้ใช้ getElementById() เพื่อเลือกแต่ละ iframe และเปลี่ยนแอตทริบิวต์ src ไปยังหน้าใหม่ new_page1.html, new_page2.html และ new_page2.html.