In deze blog wordt uitgelegd hoe u de iframe-broncode in JavaScript kunt wijzigen.
Wat is een inline frame?
Een ' inline-frame ” wordt gebruikt om een ander gespecificeerd document binnen het huidige document te bevatten. Dit resulteert in het wisselen van webpagina's op basis van de vermelde links.
Hoe de Iframe-bron in JavaScript te wijzigen?
Iframe-bron kan in JavaScript worden gewijzigd met behulp van de volgende benaderingen, samen met de ' getElementById() ” methode:
- “ Doorgegeven parameter ' Techniek.
- “ geselecteerdeIndex ' Eigendom.
Benadering 1: verander de Iframe-bron in JavaScript met behulp van doorgegeven parametertechniek
Deze techniek kan worden gebruikt om naar de opgegeven pagina over te schakelen door de overeenkomstige paginalink als parameter van een functie te plaatsen wanneer deze wordt geopend met behulp van een knop.
Voorbeeld
Laten we het onderstaande voorbeeld volgen:
< centrum >< h2 > Wijzig de iframe-bron in javascript h2 >
< iframe-id = 'webpagina' src = 'https://linuxhint.com/detect-tab-key-javascript/' breedte = '1000' hoogte = '550' framerand = '0' scrollen = 'Nee' > iframe >
< br >< br >
< knop opklik = 'Iframe wijzigen('https://linuxhint.com/category/linux-commands/')' > Klik om de pagina Linux-opdrachten weer te geven knop >
< br > br >
centrum >
Voer in de bovenstaande coderegels de volgende stappen uit:
- Specificeer de vermelde link in de '
tag mee met de aangepaste afmetingen. - Maak ook een knop met een bijgevoegde ' bij klikken ”gebeurtenis die omleidt naar de functie changeIframe() met de opgegeven link als parameter.
- Dit zal ertoe leiden dat de pagina na het klikken op de knop naar de vermelde link wordt geleid.
Laten we doorgaan naar het JavaScript-gedeelte van de code:
< scripttype = 'tekst/javascript' >
functie veranderIframe ( Wijzigen ) {
document. getElementById ( 'webpagina' ) . src = Wijzigen ;
}
script >
In het bovenstaande codefragment:
- Declareer een functie met de naam ' veranderIframe() ”.
- Ga in de definitie naar de gespecificeerde link in de ' inline-frame ” element met behulp van de “ document.getElementById() ” methode.
- Pas daarna de ' src ” attribuut en wijs de vermelde link toe bij de functietoegang tot de geopende link met behulp van de parameter “ Wijzigen ”.
- Dit zal resulteren in het wisselen van pagina's met betrekking tot de opgegeven links bij het klikken op de knop.
Uitgang
In de bovenstaande uitvoer is te zien dat de pagina's worden omgeschakeld na het klikken op de knop.
Benadering 2: Wijzig de Iframe-bron in JavaScript met behulp van de eigenschap selectedIndex
De ' geselecteerdeIndex ” eigenschap retourneert de index van de geselecteerde optie in een vervolgkeuzelijst. Deze eigenschap kan worden toegepast om door te verwijzen naar de opgegeven link met betrekking tot de waarde van de geselecteerde optie in de vervolgkeuzelijst.
Voorbeeld
Laten we het volgende voorbeeld bekijken:
< iframe-id = 'webpagina' src = 'https://linuxhint.com/detect-tab-key-javascript/' breedte = '1000' hoogte = '550' framerand = '0' scrollen = 'Nee' > iframe >
< br >< br >
< selecteer id = 'koppelingen' >
< Optie waarde = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Schakel over naar artikel 1
< Optie waarde = 'https://linuxhint.com/convert-array-to-object-javascript/' > Schakel over naar artikel twee
selecteren >
< br >< br >
< knop opKlik = 'veranderIframe();' > Wijzig Iframe Src knop >
< br >< br >
lichaam > centrum >
Voer in de bovenstaande coderegels de volgende stappen uit:
- Herinner de stap voor het specificeren van de genoemde link binnen de '