Ako zmeniť obsah dvoch alebo viacerých prvkov iframe z jedného tlačidla
Javascript / / April 14, 2023
Prvky iframe sú prvky HTML, ktoré vám umožňujú vložiť externý obsah, napríklad webové stránky, na aktuálnu stránku. V tomto článku vám ukážeme, ako zmeniť obsah dvoch alebo viacerých prvkov iframe pomocou jediného tlačidla pomocou JavaScriptu.
Obsah článku.
- • Čo je to iframe?
- • Príklad, ako zmeniť obsah viacerých prvkov iframe z tlačidla
Čo je to iframe?
Iframe je prvok HTML, ktorý dokáže vložiť externý obsah do webovej stránky. Môžete použiť štítok na vloženie webovej stránky, videa, dokumentu alebo iného multimediálneho obsahu na váš web. Základná štruktúra prvku iframe je nasledovná:
Pomocou JavaScriptu môžete dynamicky upravovať obsah prvkov iframe, čím poskytujete interaktívnejší a bezproblémovejší používateľský zážitok.
Príklad, ako zmeniť obsah viacerých prvkov iframe z tlačidla
V nasledujúcom príklade ukazujeme, ako zmeniť obsah troch prvkov iframe pomocou jediného tlačidla pomocou JavaScriptu:
function changeContent() {
document.getElementById("iframe1").src = "new_page1.html";
document.getElementById("iframe2").src = "new_page2.html";
document.getElementById("iframe3").src = "new_page3.html";
//PRIDAŤ ĎALŠIE RÁMCE AK JE TO POTREBNÉ, STAČÍ ZMENIŤ ID A URL
}
Zmeňte obsah dvoch alebo viacerých prvkov iframe pomocou jedného tlačidla
Tento príklad ukazuje, ako zmeniť obsah troch prvkov iframe pomocou jediného tlačidla v jazyku JavaScript.
V tomto príklade sme vytvorili tri prvky iframe s ID iframe1
, iframe2
a iframe3
že vložiť strana1.html
, strana2.html
a strana3.html resp. Ďalej sme vytvorili tlačidlo, ktoré po kliknutí vykoná funkciu changeContent()
. Táto funkcia využíva getElementById()
na výber každého prvku iframe a zmenu jeho atribútu src
na nové stránky nová_stranka1.html
, nová_stranka2.html
a nová_stranka2.html
.
Ako citovať? & Del Moral, M. (s.f.). Príklad zmeny obsahu dvoch alebo viacerých prvkov iframe z jedného tlačidla. Príklad. Získané 14. apríla 2023 z https://www.ejemplode.com/24-javascript/641-ejemplo_de_cambiar_contenido_de_dos_o_mas_iframe_desde_un_boton.html