Iframe-urile sunt elemente HTML care vă permit să încorporați conținut extern, cum ar fi pagini web, într-o pagină curentă. În acest articol vă arătăm cum să modificați conținutul a două sau mai multe cadre iframe folosind un singur buton folosind JavaScript.

Ce este un iframe?

Un iframe este un element HTML care poate încorpora conținut extern într-o pagină web. Puteți folosi eticheta pentru a încorpora o pagină web, un videoclip, un document sau alt conținut multimedia pe site-ul dvs. web. Structura de bază a unui iframe este următoarea:

Folosind JavaScript, puteți modifica în mod dinamic conținutul iframe-urilor, oferind o experiență de utilizator mai interactivă și mai simplă.

Exemplu de modificare a conținutului mai multor cadre iframe dintr-un buton

În exemplul următor, arătăm cum să modificați conținutul a trei cadre iframe folosind un singur buton folosind JavaScript:

funcția changeContent()
document.getElementById(„iframe1”).src = „new_page1.html”;
document.getElementById(„iframe2”).src = "new_page2.html";
document.getElementById("iframe3").src = "new_page3.html";
//ADĂUGAȚI MAI MULTE CADRE DACĂ ESTE NECESAR, DOAR SCHIMBAȚI ID-UL ȘI Adresa URL
}

Schimbați conținutul a două sau mai multe cadre iframe dintr-un singur buton

În acest exemplu, am creat trei iframe cu ID-uri iframe1, iframe2 și iframe3 care înglobează pagina1.html, pagina2.html și pagina3.html respectiv. Apoi, am creat un buton care, atunci când este apăsat, execută funcția changeContent(). Această funcție folosește getElementById() pentru a selecta fiecare iframe și a-i schimba atributul src la paginile noi new_page1.html, new_page2.html și new_page2.html.