Iframes är HTML-element som låter dig bädda in externt innehåll, till exempel webbsidor, på en aktuell sida. I den här artikeln visar vi hur du ändrar innehållet i två eller flera iframes med en enda knapp med JavaScript.

Vad är en iframe?

En iframe är ett HTML-element som kan bädda in externt innehåll på en webbsida. Du kan använda etiketten för att bädda in en webbsida, video, dokument eller annat multimediainnehåll på din webbplats. Den grundläggande strukturen för en iframe är följande:

Genom att använda JavaScript kan du dynamiskt modifiera innehållet i iframes, vilket ger en mer interaktiv och sömlös användarupplevelse.

Exempel på hur man ändrar innehåll i flera iframes från en knapp

I följande exempel visar vi hur du ändrar innehållet i tre iframes med en enda knapp med JavaScript:

funktion changeContent() {
document.getElementById("iframe1").src = "new_page1.html";

I det här exemplet har vi skapat tre iframes med id iframe1, iframe2 och iframe3 som bäddar in sida1.html, sida2.html och sida3.html respektive. Därefter har vi skapat en knapp som, när den klickas, utför funktionen changeContent(). Denna funktion använder getElementById() för att välja varje iframe och ändra dess attribut src till de nya sidorna ny_sida1.html, ny_sida2.html och ny_sida2.html.