Ez a blog elmagyarázza, hogyan módosíthatja az iframe forrását a JavaScriptben.
Mi az Inline Frame?
egy ' beépített keret ” egy másik megadott dokumentum tárolására szolgál az aktuális dokumentumon belül. Ez azt eredményezi, hogy a megadott hivatkozások alapján váltogatják a weboldalakat.
Hogyan lehet megváltoztatni az iframe forrását a JavaScriptben?
Az iframe forrása módosítható JavaScriptben a következő megközelítésekkel, valamint a „ getElementById() ” módszer:
- ' Átadott paraméter ' Technika.
- ' kiválasztottIndex ' Ingatlan.
1. megközelítés: Változtassa meg az Iframe-forrást a JavaScript-ben Passed Parameter Technique használatával
Ezzel a technikával át lehet váltani a megadott oldalra úgy, hogy egy gomb segítségével elérve a megfelelő oldalhivatkozást a funkció paramétereként helyezzük el.
Példa
Kövessük az alábbi példát:
< központ >< h2 > Módosítsa az iframe forrását ban ben JavaScript h2 >
< iframe azonosító = 'honlap' src = 'https://linuxhint.com/detect-tab-key-javascript/' szélesség = '1000' magasság = '550' keretszegély = '0' görgetés = 'Nem' > iframe >
< br >< br >
< gomb onclick = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Kattintson a Linux parancsok oldalának megjelenítéséhez gomb >
< br > br >
központ >
A fenti kódsorokban hajtsa végre a következő lépéseket:
- Adja meg a megadott hivatkozást a '
” címkét a módosított méretekkel együtt. - Ezenkívül hozzon létre egy gombot egy csatolt „ kattintásra ” esemény átirányítása a changeIframe() függvényre, amelynek paramétere a megadott hivatkozás.
- Ez azt eredményezi, hogy a gombra kattintva az oldal a megadott linkre kerül.
Folytassuk a kód JavaScript részével:
< script típus = 'text/javascript' >
funkció changeIframe ( változás ) {
dokumentum. getElementById ( 'honlap' ) . src = változás ;
}
forgatókönyv >
A fenti kódrészletben:
- Deklaráljon egy ' nevű függvényt changeIframe() ”.
- A definíciójában nyissa meg a megadott hivatkozást a ' beépített keret ' elemet a ' document.getElementById() ” módszerrel.
- Ezt követően alkalmazza a „ src ” attribútumot, és rendelje hozzá a megadott hivatkozást a függvény elérésekor az elért hivatkozáshoz a „ paraméter segítségével változás ”.
- Ez azt eredményezi, hogy a gombra kattintáskor a megadott hivatkozásokhoz képest oldalak váltanak.
Kimenet
A fenti kimeneten megfigyelhető, hogy a gombra kattintva oldalak váltanak.
2. megközelítés: Változtassa meg az Iframe-forrást a JavaScriptben a kiválasztott indextulajdonság használatával
Az ' kiválasztottIndex ” tulajdonság legördülő listában adja vissza a kiválasztott opció indexét. Ez a tulajdonság alkalmazható a megadott hivatkozásra való átirányításra, tekintettel a legördülő listából kiválasztott opció értékére.
Példa
Figyeljük meg a következő példát:
< iframe azonosító = 'honlap' src = 'https://linuxhint.com/detect-tab-key-javascript/' szélesség = '1000' magasság = '550' keretszegély = '0' görgetés = 'Nem' > iframe >
< br >< br >
< válassza ki az azonosítót = 'linkek' >
< opció értéke = „https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/” > Váltás a cikkre 1
< opció értéke = „https://linuxhint.com/convert-array-to-object-javascript/” > Váltás a cikkre két
válassza ki >
< br >< br >
< gombra kattintva = 'changeIframe();' > Változás Iframe Src gomb >
< br >< br >
test > központ >
A fenti kódsorokban hajtsa végre a következő lépéseket:
- Idézze fel a lépést a megadott hivatkozás megadásához a „