วิธีเปลี่ยนเนื้อหาของ Iframes สองรายการขึ้นไปจากปุ่มเดียว

Javascript / by admin / April 14, 2023

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

เนื้อหาของบทความ

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

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

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

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

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

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

เปลี่ยนเนื้อหาของ iframes สองรายการขึ้นไปจากปุ่มเดียว

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

instagram story viewer

//เพิ่ม เฟรม หากจำเป็น เพียงเปลี่ยน ID และ URL
}

เปลี่ยนเนื้อหาของ iframes สองรายการขึ้นไปจากปุ่มเดียว

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

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

วิธีการพูด? & เดล โมราล, ม. (ส.ฟ.). ตัวอย่างการเปลี่ยนเนื้อหาของ Iframes สองรายการขึ้นไปจากปุ่มเดียว ตัวอย่างของ. สืบค้นเมื่อ 14 เมษายน 2566 จาก https://www.ejemplode.com/24-javascript/641-ejemplo_de_cambiar_contenido_de_dos_o_mas_iframe_desde_un_boton.html

แท็ก cloud

Javascript

เรตติ้ง

มุมมอง

ความคิดเห็น