Kuinka muuttaa kahden tai useamman iframe-kehyksen sisältöä yhdestä painikkeesta

Javascript   /   by admin   /   April 14, 2023

Iframes ovat HTML-elementtejä, joiden avulla voit upottaa ulkoista sisältöä, kuten verkkosivuja, nykyiselle sivulle. Tässä artikkelissa näytämme, kuinka voit muuttaa kahden tai useamman iframe-kehyksen sisältöä yhdellä painikkeella JavaScriptin avulla.

Artikkelin sisältö.

  1. • Mikä on iframe?
  2. • Esimerkki useiden iframe-kehysten sisällön muuttamisesta painikkeesta

Mikä on iframe?

Iframe on HTML-elementti, joka voi upottaa ulkoista sisältöä verkkosivulle. Voit käyttää etikettiä upottaaksesi verkkosivun, videon, asiakirjan tai muun multimediasisällön verkkosivustollesi. Iframen perusrakenne on seuraava:

JavaScriptin avulla voit muokata iframe-kehysten sisältöä dynaamisesti, mikä tarjoaa interaktiivisemman ja saumattomamman käyttökokemuksen.

Esimerkki useiden iframe-kehysten sisällön muuttamisesta painikkeesta

Seuraavassa esimerkissä näytämme kuinka muuttaa kolmen iframe-kehyksen sisältöä yhdellä painikkeella JavaScriptin avulla:



Muuta kahden tai useamman iframe-kehyksen sisältöä yhdestä painikkeesta

instagram story viewer


funktio changeContent() {
document.getElementById("iframe1").src = "uusi_sivu1.html";
document.getElementById("iframe2").src = "new_page2.html";
document.getElementById("iframe3").src = "new_page3.html";
//LISÄÄ LISÄÄ KEHYKSET JOS TARPEEN, MUUTA TUNNUS JA URL-osoite
}



Muuta kahden tai useamman iframe-kehyksen sisältöä yhdestä painikkeesta


Tämä esimerkki näyttää, kuinka kolmen iframe-kehyksen sisältöä voidaan muuttaa yhdellä painikkeella JavaScriptissä.







Tässä esimerkissä olemme luoneet kolme iframe-kehystä tunnuksella iframe1, iframe2 ja iframe3 tuo upotus sivu1.html, sivu2.html ja sivu3.html vastaavasti. Seuraavaksi olemme luoneet painikkeen, joka suorittaa toiminnon, kun sitä napsautetaan changeContent(). Tämä toiminto käyttää getElementById() valitaksesi jokaisen iframe-kehyksen ja muuttaaksesi sen attribuuttia src uusille sivuille uusi_sivu1.html, uusi_sivu2.html ja uusi_sivu2.html.

Kuinka lainata? & Del Moral, M. (s.f.). Esimerkki kahden tai useamman iframe-kehyksen sisällön muuttamisesta yhdestä painikkeesta. Esimerkki. Haettu 14. huhtikuuta 2023 alkaen https://www.ejemplode.com/24-javascript/641-ejemplo_de_cambiar_contenido_de_dos_o_mas_iframe_desde_un_boton.html

Tunnisteet pilvi
Luokitus
0
Näkymät
0
Kommentit
YOU MIGHT ALSO LIKE