Hvordan endre iframe-kilde i JavaScript?

Hvordan Endre Iframe Kilde I Javascript



Når du oppretter en nettside eller nettstedet, er det et krav om å omdirigere sluttbrukeren til en annen nettside for å få tilgang til den relevante/søkte ' innhold '. I tillegg til det, tilby ulike funksjoner til brukeren på samme tid og dermed gjøre tilgjengelighet mulig. I slike scenarier vil endring av iframe-kilden i JavaScript gjøre underverker for å gi brukeren letthet når det gjelder tid og problemer.

Denne bloggen vil forklare hvordan du endrer iframe-kilden i JavaScript.

Hva er en innebygd ramme?

en ' innebygd ramme ' brukes til å inneholde et annet spesifisert dokument i det gjeldende dokumentet. Dette resulterer i å bytte nettsider basert på de angitte koblingene.





Hvordan endre iframe-kilde i JavaScript?

Iframe-kilden kan endres i JavaScript ved å bruke følgende tilnærminger sammen med ' getElementById() ' metode:



  • ' Bestått parameter 'Teknikk.
  • ' valgt indeks 'Eiendom.

Tilnærming 1: Endre iframe-kilde i JavaScript ved å bruke bestått parameterteknikk

Denne teknikken kan brukes til å bytte til den angitte siden ved å plassere den tilsvarende sidelenken som en funksjons parameter når den åpnes ved hjelp av en knapp.



Eksempel
La oss følge eksemplet nedenfor:



< senter >< h2 > Endre iframe-kilden i JavaScript h2 >
< iframe-id = 'nettside' src = 'https://linuxhint.com/detect-tab-key-javascript/' bredde = '1000' høyde = '550' ramme grense = '0' rulling = 'Nei' > iframe >
< br >< br >
< knappen ved å klikke = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Klikk for å vise Linux-kommandoersiden knapp >
< br > br >
senter >

Utfør følgende trinn i kodelinjene ovenfor:

  • Spesifiser den oppgitte lenken i ' ” tag sammen med de justerte dimensjonene.
  • Lag også en knapp med en vedlagt ' ved trykk ” hendelse som omdirigerer til funksjonen changeIframe() med den spesifiserte koblingen som parameter.
  • Dette vil resultere i å dirigere siden til den oppgitte lenken ved å klikke på knappen.

La oss fortsette til JavaScript-delen av koden:



< skripttype = 'tekst/javascript' >
funksjon endreIframe ( endring ) {
dokument. getElementById ( 'nettside' ) . src = endring ;
}
manus >

I kodebiten ovenfor:

  • Erklær en funksjon kalt ' changeIframe() '.
  • I sin definisjon får du tilgang til den angitte lenken i ' innebygd ramme ' element ved hjelp av ' document.getElementById() 'metoden.
  • Etter det bruker du ' src ” attributt og allokere den oppgitte lenken ved funksjonstilgang til den åpnede lenken ved å bruke parameteren ” endring '.
  • Dette vil resultere i å bytte sidene med hensyn til de spesifiserte koblingene ved å klikke på knappen.

Produksjon

I utgangen ovenfor kan det observeres at sidene byttes ved å klikke på knappen.

Tilnærming 2: Endre iframe-kilde i JavaScript ved å bruke selectIndex Property

« valgt indeks ” egenskap returnerer det valgte alternativets indeks i en rullegardinliste. Denne egenskapen kan brukes for å omdirigere til den angitte lenken med hensyn til verdien av det valgte alternativet fra rullegardinlisten.

Eksempel
La oss se på følgende eksempel:

< senter >< kropp >
< iframe-id = 'nettside' src = 'https://linuxhint.com/detect-tab-key-javascript/' bredde = '1000' høyde = '550' ramme grense = '0' rulling = 'Nei' > iframe >
< br >< br >
< velg id = 'lenker' >
< opsjonsverdi = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Bytt til artikkel 1
< opsjonsverdi = 'https://linuxhint.com/convert-array-to-object-javascript/' > Bytt til artikkel to
å velge >
< br >< br >
< knappen på Klikk = 'endreIframe();' > Endre Iframe Src knapp >
< br >< br >
kropp > senter >

Utfør følgende trinn i kodelinjene ovenfor:

  • Husk trinnet for å spesifisere den angitte lenken i '