Hur ändrar man iframe-källa i JavaScript?

Hur Andrar Man Iframe Kalla I Javascript



När du skapar en webbsida eller webbplats finns det ett krav att omdirigera slutanvändaren till en annan webbsida för att komma åt den relevanta/sökta ' innehåll ”. Utöver det, tillhandahålla olika funktioner till användaren samtidigt, vilket gör tillgängligheten möjlig. I sådana fall gör det underverk att ändra iframe-källan i JavaScript för att underlätta för användaren i form av tid och krångel.

Den här bloggen kommer att förklara hur du ändrar iframe-källan i JavaScript.

Vad är en inbyggd ram?

En ' inline ram ” används för att innehålla ett annat specificerat dokument i det aktuella dokumentet. Detta resulterar i byte av webbsidor baserat på de angivna länkarna.





Hur ändrar man iframe-källa i JavaScript?

Iframe-källa kan ändras i JavaScript med följande metoder tillsammans med ' getElementById() ' metod:



  • ' Godkänd parameter ' Metod.
  • ' valt index ' Fast egendom.

Metod 1: Ändra iframe-källa i JavaScript med godkänd parameterteknik

Denna teknik kan användas för att växla till den angivna sidan genom att placera motsvarande sidlänk som en funktions parameter när den nås med hjälp av en knapp.



Exempel
Låt oss följa nedanstående exempel:



< Centrum >< h2 > Ändra iframe-källan i JavaScript h2 >
< iframe-id = 'webbsida' src = 'https://linuxhint.com/detect-tab-key-javascript/' bredd = '1000' höjd = '550' ramkant = '0' rullning = 'Nej' > iframe >
< br >< br >
< knappen när du klickar = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Klicka för att visa Linux-kommandosidan knapp >
< br > br >
Centrum >

I ovanstående kodrader utför du följande steg:

  • Ange den angivna länken i ' ” taggen tillsammans med de justerade måtten.
  • Skapa också en knapp med en bifogad ' onclick ” händelse som omdirigerar till funktionen changeIframe() med den angivna länken som parameter.
  • Detta kommer att leda till att sidan dirigeras till den angivna länken när du klickar på knappen.

Låt oss fortsätta till JavaScript-delen av koden:



< skripttyp = 'text/javascript' >
fungera changeIframe ( förändra ) {
dokumentera. getElementById ( 'webbsida' ) . src = förändra ;
}
manus >

I kodavsnittet ovan:

  • Deklarera en funktion som heter ' changeIframe() ”.
  • I dess definition, gå till den angivna länken i ' inline ram ' element med hjälp av ' document.getElementById() 'metoden.
  • Efter det, använd ' src ” attribut och allokera den angivna länken vid funktionen åtkomst till den åtkomliga länken med hjälp av parametern ” förändra ”.
  • Detta kommer att resultera i att sidorna ändras med avseende på de angivna länkarna när du klickar på knappen.

Produktion

I ovanstående utdata kan det observeras att sidorna växlas när du klickar på knappen.

Tillvägagångssätt 2: Ändra iframe-källa i JavaScript med hjälp av selectIndex Property

den ' valt index egenskapen returnerar det valda alternativets index i en rullgardinslista. Den här egenskapen kan användas för att omdirigera till den angivna länken med avseende på värdet för det valda alternativet från rullgardinsmenyn.

Exempel
Låt oss observera följande exempel:

< Centrum >< kropp >
< iframe-id = 'webbsida' src = 'https://linuxhint.com/detect-tab-key-javascript/' bredd = '1000' höjd = '550' ramkant = '0' rullning = 'Nej' > iframe >
< br >< br >
< välj id = 'länkar' >
< optionens värde = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Byt till artikel 1
< optionens värde = 'https://linuxhint.com/convert-array-to-object-javascript/' > Byt till artikel två
Välj >
< br >< br >
< knappen på Klicka = 'changeIframe();' > Ändra Iframe Src knapp >
< br >< br >
kropp > Centrum >

I ovanstående kodrader utför du följande steg:

  • Kom ihåg steget för att ange den angivna länken i '