Iframes su HTML elementi koji vam omogućuju da ugradite vanjski sadržaj, kao što su web stranice, unutar trenutne stranice. U ovom članku ćemo vam pokazati kako promijeniti sadržaj dva ili više okvira iframe pomoću jednog gumba pomoću JavaScripta.

Što je iframe?

Iframe je HTML element koji može ugraditi vanjski sadržaj u web stranicu. Možete koristiti oznaku za ugradnju web stranice, videa, dokumenta ili drugog multimedijskog sadržaja na vašu web stranicu. Osnovna struktura iframea je sljedeća:

Korištenjem JavaScripta možete dinamički mijenjati sadržaj iframeova, pružajući interaktivnije i besprijekorno korisničko iskustvo.

Primjer kako promijeniti sadržaj više iframeova pomoću gumba

U sljedećem primjeru pokazujemo kako promijeniti sadržaj tri iframea pomoću jednog gumba pomoću JavaScripta:

funkcija changeContent() {
document.getElementById("iframe1").src = "nova_stranica1.html";

U ovom smo primjeru stvorili tri iframea s ID-ovima iframe1, iframe2 i iframe3 koji ugrađuju stranica1.html, stranica2.html i stranica3.html odnosno. Zatim smo stvorili gumb koji, kada se klikne, izvršava funkciju promijeniSadržaj(). Ova funkcija koristi getElementById() da odaberete svaki iframe i promijenite njegov atribut src na nove stranice nova_stranica1.html, nova_stranica2.html i nova_stranica2.html.