Az iframe-ek olyan HTML-elemek, amelyek lehetővé teszik külső tartalom, például weboldalak beágyazását egy aktuális oldalba. Ebben a cikkben bemutatjuk, hogyan módosíthatja két vagy több iframe tartalmát egyetlen gombbal JavaScript használatával.

Mi az iframe?

Az iframe egy HTML-elem, amely külső tartalmat ágyazhat be egy weboldalba. Használhatja a címkét weboldal, videó, dokumentum vagy egyéb multimédiás tartalom beágyazásához a webhelyen. Az iframe alapvető felépítése a következő:

A JavaScript használatával dinamikusan módosíthatja az iframe-ek tartalmát, így interaktívabb és zökkenőmentesebb felhasználói élményt nyújt.

Példa több iframe tartalmának megváltoztatására egy gombról

A következő példában bemutatjuk, hogyan változtathatjuk meg három iframe tartalmát egyetlen gombbal JavaScript használatával:

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

Ebben a példában három iframe-et hoztunk létre azonosítókkal iframe1, iframe2 és iframe3 hogy beágyaz oldal1.html, oldal2.html és oldal3.html illetőleg. Ezután létrehoztunk egy gombot, amelyre kattintva végrehajtja a funkciót changeContent(). Ez a funkció használja getElementById() az egyes iframe-ek kiválasztásához és attribútumának megváltoztatásához src az új oldalakra új_oldal1.html, új_oldal2.html és új_oldal2.html.