Paano Baguhin ang Iframe Source sa JavaScript?

Paano Baguhin Ang Iframe Source Sa Javascript



Habang gumagawa ng web page o site, mayroong pangangailangang i-redirect ang end-user sa ibang web page para ma-access ang nauugnay/hinanap na ' nilalaman ”. Bukod pa riyan, ang pagbibigay ng iba't ibang functionality sa user nang sabay-sabay sa gayon ay ginagawang posible ang accessibility. Sa ganitong mga sitwasyon, ang pagpapalit ng iframe source sa JavaScript ay nagdudulot ng kahanga-hangang pagbibigay sa user ng kadalian sa oras at abala.

Ipapaliwanag ng blog na ito kung paano baguhin ang iframe source sa JavaScript.

Ano ang isang Inline Frame?

isang ' inline na frame ” ay ginagamit upang maglaman ng isa pang tinukoy na dokumento sa loob ng kasalukuyang dokumento. Nagreresulta ito sa paglipat ng mga web page batay sa mga nakasaad na link.





Paano Baguhin ang Iframe Source sa JavaScript?

Ang pinagmulan ng Iframe ay maaaring baguhin sa JavaScript gamit ang mga sumusunod na diskarte kasama ang ' getElementById() 'paraan:



  • “ Naipasa ang parameter ” Teknik.
  • “ pinilingIndex ” Ari-arian.

Diskarte 1: Baguhin ang Iframe Source sa JavaScript Gamit ang Passed Parameter Technique

Ang diskarteng ito ay maaaring gamitin upang lumipat sa tinukoy na pahina sa pamamagitan ng paglalagay ng kaukulang link ng pahina bilang parameter ng isang function kapag na-access sa tulong ng isang pindutan.



Halimbawa
Sundin natin ang nakasaad sa ibabang halimbawa:



< gitna >< h2 > Baguhin ang pinagmulan ng iframe sa JavaScript h2 >
< iframe id = 'Pahina ng web' src = 'https://linuxhint.com/detect-tab-key-javascript/' lapad = '1000' taas = '550' paligid ng frame = '0' pag-scroll = 'Hindi' > iframe >
< br >< br >
< button sa pag-click = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > I-click upang ipakita ang Linux Commands Page pindutan >
< br > br >
gitna >

Sa mga linya ng code sa itaas, gawin ang mga sumusunod na hakbang:

  • Tukuyin ang nakasaad na link sa “ ” tag kasama ng mga isinaayos na sukat.
  • Gayundin, lumikha ng isang pindutan na may kalakip na ' onclick ” event na nagre-redirect sa function changeIframe() na mayroong tinukoy na link bilang parameter nito.
  • Magreresulta ito sa pagdidirekta sa pahina sa nakasaad na link sa pag-click sa pindutan.

Magpatuloy tayo sa JavaScript na bahagi ng code:



< uri ng script = 'text/javascript' >
function baguhinIframe ( pagbabago ) {
dokumento. getElementById ( 'Pahina ng web' ) . src = pagbabago ;
}
iskrip >

Sa snippet ng code sa itaas:

  • Ipahayag ang isang function na pinangalanang ' changeIframe() ”.
  • Sa kahulugan nito, i-access ang tinukoy na link sa ' inline na frame 'elemento gamit ang ' document.getElementById() ” paraan.
  • Pagkatapos nito, ilapat ang ' src ” attribute at ilaan ang nakasaad na link sa function na access sa na-access na link gamit ang parameter na “ pagbabago ”.
  • Magreresulta ito sa paglipat ng mga pahina na may paggalang sa mga tinukoy na link sa pag-click sa pindutan.

Output

Sa output sa itaas, mapapansin na ang mga pahina ay inililipat sa pag-click sa pindutan.

Diskarte 2: Baguhin ang Iframe Source sa JavaScript Gamit ang napilingIndex Property

Ang ' pinilingIndex Ibinabalik ng property ng ” ang index ng napiling opsyon sa isang drop-down na listahan. Maaaring ilapat ang property na ito upang mag-redirect sa tinukoy na link na may kinalaman sa halaga ng napiling opsyon mula sa dropdown na listahan.

Halimbawa
Pagmasdan natin ang sumusunod na halimbawa:

< gitna >< katawan >
< iframe id = 'Pahina ng web' src = 'https://linuxhint.com/detect-tab-key-javascript/' lapad = '1000' taas = '550' paligid ng frame = '0' pag-scroll = 'Hindi' > iframe >
< br >< br >
< piliin ang id = 'mga link' >
< halaga ng opsyon = “https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/” > Lumipat sa Artikulo 1
< halaga ng opsyon = “https://linuxhint.com/convert-array-to-object-javascript/” > Lumipat sa Artikulo dalawa
pumili >
< br >< br >
< pindutan sa I-click = 'changeIframe();' > Baguhin ang Iframe Src pindutan >
< br >< br >
katawan > gitna >

Sa mga linya ng code sa itaas, gawin ang mga sumusunod na hakbang:

  • Alalahanin ang hakbang para sa pagtukoy sa nakasaad na link sa loob ng “