Cum se schimbă sursa Iframe în JavaScript?

Cum Se Schimba Sursa Iframe In Javascript



În timpul creării unei pagini web sau a site-ului, există o cerință de a redirecționa utilizatorul final către o altă pagină web pentru a accesa pagina relevantă/ căutată. conţinut ”. În plus, oferind diferite funcționalități utilizatorului în același timp, făcând astfel accesibilitatea fezabilă. În astfel de scenarii, schimbarea sursei iframe în JavaScript face minuni în oferirea ușurinței utilizatorului în termeni de timp și bătăi de cap.

Acest blog va explica cum să schimbați sursa iframe în JavaScript.

Ce este un cadru inline?

Un „ cadru inline ” este folosit pentru a conține un alt document specificat în documentul curent. Acest lucru are ca rezultat schimbarea paginilor web pe baza linkurilor menționate.





Cum se schimbă sursa Iframe în JavaScript?

Sursa Iframe poate fi schimbată în JavaScript folosind următoarele abordări împreună cu „ getElementById() ” metoda:



  • „ Parametru trecut ” Tehnica.
  • „ selectatIndex ” Proprietate.

Abordarea 1: Modificați sursa Iframe în JavaScript utilizând tehnica parametrilor trecuți

Această tehnică poate fi utilizată pentru a comuta la pagina specificată prin plasarea linkului de pagină corespunzătoare ca parametru al funcției atunci când este accesată cu ajutorul unui buton.



Exemplu
Să urmăm exemplul de mai jos:



< centru >< h2 > Schimbați sursa iframe în JavaScript h2 >
< iframe id = 'pagină web' src = „https://linuxhint.com/detect-tab-key-javascript/” lăţime = '1000' înălţime = '550' chenarul cadru = '0' defilare = 'Nu' > iframe >
< br >< br >
< butonul la clic = „changeIframe('https://linuxhint.com/category/linux-commands/')” > Faceți clic pentru a afișa pagina de comenzi Linux buton >
< br > br >
centru >

În rândurile de cod de mai sus, efectuați următorii pași:

  • Specificați linkul menționat în „ ” eticheta împreună cu dimensiunile ajustate.
  • De asemenea, creați un buton cu un atașat „ onclick ” eveniment care redirecționează către funcția changeIframe() având link-ul specificat ca parametru.
  • Acest lucru va avea ca rezultat direcționarea paginii către linkul menționat la clic pe butonul.

Să continuăm cu partea JavaScript a codului:



< tip de script = „text/javascript” >
funcţie schimbaIframe ( Schimbare ) {
document. getElementById ( 'pagină web' ) . src = Schimbare ;
}
scenariu >

În fragmentul de cod de mai sus:

  • Declarați o funcție numită „ changeIframe() ”.
  • În definiția sa, accesați linkul specificat în „ cadru inline ” element folosind “ document.getElementById() ” metoda.
  • După aceea, aplicați „ src ” atribute și alocă linkul declarat la accesul funcției la linkul accesat folosind parametrul “ Schimbare ”.
  • Acest lucru va avea ca rezultat schimbarea paginilor cu privire la linkurile specificate la clic pe buton.

Ieșire

În rezultatul de mai sus, se poate observa că paginile sunt comutate la apăsarea butonului.

Abordarea 2: Modificați sursa Iframe în JavaScript utilizând proprietatea selectedIndex

„ selectatIndex „Proprietatea returnează indexul opțiunii selectate într-o listă derulantă. Această proprietate poate fi aplicată pentru a redirecționa către linkul specificat în ceea ce privește valoarea opțiunii selectate din lista verticală.

Exemplu
Să observăm următorul exemplu:

< centru >< corp >
< iframe id = 'pagină web' src = „https://linuxhint.com/detect-tab-key-javascript/” lăţime = '1000' înălţime = '550' chenarul cadru = '0' defilare = 'Nu' > iframe >
< br >< br >
< selectați id = 'linkuri' >
< valoarea opțiunii = „https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/” > Treceți la articolul 1
< valoarea opțiunii = „https://linuxhint.com/convert-array-to-object-javascript/” > Treceți la articolul Două
Selectați >
< br >< br >
< butonul peClick = „changeIframe();” > Schimbați Iframe Src buton >
< br >< br >
corp > centru >

În rândurile de cod de mai sus, efectuați următorii pași:

  • Amintiți-vă pasul pentru specificarea link-ului menționat în „