Hvordan ændres iframe-kilde i JavaScript?

Hvordan Aendres Iframe Kilde I Javascript



Mens du opretter en webside eller et websted, er der et krav om at omdirigere slutbrugeren til en anden webside for at få adgang til den relevante/søgte ' indhold ”. Derudover giver brugeren forskellige funktionaliteter på samme tid, hvilket gør tilgængelighed mulig. I sådanne tilfælde gør ændring af iframe-kilden i JavaScript underværker ved at give brugeren lethed i form af tid og besvær.

Denne blog vil forklare, hvordan du ændrer iframe-kilden i JavaScript.

Hvad er en Inline Frame?

en ' inline ramme ” bruges til at indeholde et andet specificeret dokument i det aktuelle dokument. Dette resulterer i skift af websider baseret på de angivne links.





Hvordan ændres iframe-kilde i JavaScript?

Iframe-kilde kan ændres i JavaScript ved hjælp af følgende tilgange sammen med ' getElementById() ” metode:



  • “ Bestået parameter ' Teknik.
  • “ valgt indeks ”Ejendom.

Fremgangsmåde 1: Skift iframe-kilde i JavaScript ved hjælp af bestået parameterteknik

Denne teknik kan bruges til at skifte til den angivne side ved at placere det tilsvarende sidelink som en funktions parameter, når det åbnes ved hjælp af en knap.



Eksempel
Lad os følge nedenstående eksempel:



< centrum >< h2 > Skift iframe-kilden i JavaScript h2 >
< iframe id = 'hjemmeside' src = 'https://linuxhint.com/detect-tab-key-javascript/' bredde = '1000' højde = '550' rammekant = '0' rulle = 'Ingen' > iframe >
< br >< br >
< knap ved klik = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Klik for at vise siden med Linux-kommandoer knap >
< br > br >
centrum >

I ovenstående kodelinjer skal du udføre følgende trin:

  • Angiv det angivne link i ' ” tag sammen med de justerede mål.
  • Opret også en knap med en vedhæftet ' onclick ” hændelse, der omdirigerer til funktionen changeIframe() med det angivne link som parameter.
  • Dette vil resultere i, at siden dirigeres til det angivne link ved et klik på knappen.

Lad os fortsætte til JavaScript-delen af ​​koden:



< script type = 'tekst/javascript' >
fungere changeIframe ( lave om ) {
dokument. getElementById ( 'hjemmeside' ) . src = lave om ;
}
manuskript >

I ovenstående kodestykke:

  • Erklære en funktion ved navn ' changeIframe() ”.
  • I sin definition skal du få adgang til det angivne link i ' inline ramme ' element ved hjælp af ' document.getElementById() ” metode.
  • Anvend derefter ' src ” attribut og alloker det angivne link ved funktionsadgang til det tilgåede link ved hjælp af parameteren “ lave om ”.
  • Dette vil resultere i, at siderne skiftes med hensyn til de angivne links ved et klik på knappen.

Produktion

I ovenstående output kan det ses, at siderne skiftes ved at klikke på knappen.

Fremgangsmåde 2: Skift iframe-kilde i JavaScript ved hjælp af selectIndex Property

Det ' valgt indeks ” egenskab returnerer den valgte indstillings indeks i en rulleliste. Denne egenskab kan anvendes til at omdirigere til det angivne link med hensyn til værdien af ​​den valgte mulighed fra rullelisten.

Eksempel
Lad os se følgende eksempel:

< centrum >< legeme >
< iframe id = 'hjemmeside' src = 'https://linuxhint.com/detect-tab-key-javascript/' bredde = '1000' højde = '550' rammekant = '0' rulle = 'Ingen' > iframe >
< br >< br >
< vælg id = 'links' >
< option værdi = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Skift til artikel 1
< option værdi = 'https://linuxhint.com/convert-array-to-object-javascript/' > Skift til artikel to
Vælg >
< br >< br >
< knap på klik = 'changeIframe();' > Skift Iframe Src knap >
< br >< br >
legeme > centrum >

I ovenstående kodelinjer skal du udføre følgende trin:

  • Husk trinnet til at specificere det angivne link i '