Bagaimana untuk Mengubah Sumber Iframe dalam JavaScript?

Bagaimana Untuk Mengubah Sumber Iframe Dalam Javascript



Semasa membuat halaman web atau tapak, terdapat keperluan untuk mengubah hala pengguna akhir ke halaman web lain untuk mengakses ' yang berkaitan/dicari kandungan ”. Di samping itu, menyediakan pelbagai fungsi kepada pengguna pada masa yang sama dengan itu menjadikan kebolehaksesan boleh dilaksanakan. Dalam senario kes sedemikian, menukar sumber iframe dalam JavaScript memberikan keajaiban dalam memberikan kemudahan pengguna dari segi masa dan kerumitan.

Blog ini akan menerangkan cara menukar sumber iframe dalam JavaScript.

Apakah Bingkai Sebaris?

Sebuah “ bingkai sebaris ” digunakan untuk mengandungi dokumen lain yang ditentukan dalam dokumen semasa. Ini mengakibatkan penukaran halaman web berdasarkan pautan yang dinyatakan.





Bagaimana untuk Mengubah Sumber Iframe dalam JavaScript?

Sumber iframe boleh ditukar dalam JavaScript menggunakan pendekatan berikut bersama dengan ' getElementById() ' kaedah:



  • “ Parameter lulus ” Teknik.
  • “ indeks terpilih ” Harta.

Pendekatan 1: Tukar Sumber Iframe dalam JavaScript Menggunakan Teknik Parameter Lulus

Teknik ini boleh digunakan untuk beralih ke halaman yang ditentukan dengan meletakkan pautan halaman yang sepadan sebagai parameter fungsi apabila diakses dengan bantuan butang.



Contoh
Mari ikuti contoh yang dinyatakan di bawah:



< pusat >< h2 > Tukar sumber iframe dalam JavaScript h2 >
< id iframe = 'laman sesawang' src = 'https://linuxhint.com/detect-tab-key-javascript/' lebar = '1000' ketinggian = '550' sempadan bingkai = '0' menatal = 'tidak' > iframe >
< br >< br >
< butang onclick = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Klik untuk memaparkan Halaman Perintah Linux butang >
< br > br >
pusat >

Dalam baris kod di atas, lakukan langkah berikut:

  • Nyatakan pautan yang dinyatakan dalam “ teg ” bersama dengan dimensi yang dilaraskan.
  • Juga, buat butang dengan dilampirkan ' onclick ” acara mengubah hala ke fungsi changeIframe() yang mempunyai pautan yang ditentukan sebagai parameternya.
  • Ini akan menyebabkan halaman mengarahkan ke pautan yang dinyatakan apabila butang klik.

Mari teruskan ke bahagian JavaScript kod:



< jenis skrip = 'teks/javascript' >
fungsi changeIframe ( ubah ) {
dokumen. getElementById ( 'laman sesawang' ) . src = ubah ;
}
skrip >

Dalam coretan kod di atas:

  • Istiharkan fungsi bernama “ changeIframe() ”.
  • Dalam definisinya, akses pautan yang ditentukan dalam ' bingkai sebaris elemen ” menggunakan “ document.getElementById() ” kaedah.
  • Selepas itu, gunakan ' src ' atribut dan peruntukkan pautan yang dinyatakan pada capaian fungsi kepada pautan yang diakses menggunakan parameter ' ubah ”.
  • Ini akan mengakibatkan penukaran halaman berkenaan dengan pautan yang ditentukan apabila butang klik.

Pengeluaran

Dalam output di atas, dapat diperhatikan bahawa halaman dihidupkan apabila mengklik butang.

Pendekatan 2: Tukar Sumber Iframe dalam JavaScript Menggunakan SelectIndex Property

' indeks terpilih sifat ” mengembalikan indeks pilihan yang dipilih dalam senarai juntai bawah. Sifat ini boleh digunakan untuk mengubah hala ke pautan yang ditentukan berkenaan dengan nilai pilihan yang dipilih daripada senarai juntai bawah.

Contoh
Mari kita perhatikan contoh berikut:

< pusat >< badan >
< id iframe = 'laman sesawang' src = 'https://linuxhint.com/detect-tab-key-javascript/' lebar = '1000' ketinggian = '550' sempadan bingkai = '0' menatal = 'tidak' > iframe >
< br >< br >
< pilih id = 'pautan' >
< nilai pilihan = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Tukar kepada Artikel 1
< nilai pilihan = 'https://linuxhint.com/convert-array-to-object-javascript/' > Tukar kepada Artikel dua
pilih >
< br >< br >
< butang padaKlik = 'changeIframe();' > Tukar Iframe Src butang >
< br >< br >
badan > pusat >

Dalam baris kod di atas, lakukan langkah berikut:

  • Ingat kembali langkah untuk menentukan pautan yang dinyatakan dalam '