Bagaimana Cara Mengubah Sumber Iframe di JavaScript?

Bagaimana Cara Mengubah Sumber Iframe Di Javascript



Saat membuat halaman web atau situs, ada persyaratan untuk mengarahkan pengguna akhir ke halaman web lain untuk mengakses yang relevan/dicari “ isi ”. Selain itu, menyediakan berbagai fungsi kepada pengguna pada saat yang sama sehingga membuat aksesibilitas menjadi layak. Dalam skenario kasus seperti itu, mengubah sumber iframe dalam JavaScript sangat membantu dalam memberikan kemudahan bagi pengguna dalam hal waktu dan kerumitan.

Blog ini akan menjelaskan cara mengubah sumber iframe di JavaScript.

Apa itu Bingkai Sebaris?

Sebuah ' bingkai sebaris ” digunakan untuk memuat dokumen tertentu lainnya dalam dokumen saat ini. Ini menghasilkan pengalihan halaman web berdasarkan tautan yang disebutkan.





Bagaimana Mengubah Sumber Iframe di JavaScript?

Sumber iframe dapat diubah dalam JavaScript menggunakan pendekatan berikut bersama dengan ' getElementById() ' metode:



  • “ Parameter lulus Teknik.
  • “ indeks terpilih ' Properti.

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

Teknik ini dapat digunakan untuk beralih ke halaman tertentu dengan menempatkan link halaman yang sesuai sebagai parameter fungsi saat diakses dengan bantuan tombol.



Contoh
Mari kita ikuti contoh yang dinyatakan di bawah ini:



< tengah >< h2 > Ubah sumber iframe di JavaScript h2 >
< id iframe = 'halaman web' src = 'https://linuxhint.com/detect-tab-key-javascript/' lebar = '1000' tinggi = '550' batas bingkai = '0' bergulir = 'Tidak' > iframe >
< br >< br >
< tombol onclick = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Klik untuk menampilkan Halaman Perintah Linux tombol >
< br > br >
tengah >

Pada baris kode di atas, lakukan langkah-langkah berikut:

  • Tentukan tautan yang disebutkan di “ ” bersama dengan dimensi yang disesuaikan.
  • Juga, buat tombol dengan lampiran “ klik ” acara mengalihkan ke fungsi changeIframe() yang memiliki tautan yang ditentukan sebagai parameternya.
  • Ini akan menghasilkan mengarahkan halaman ke tautan yang disebutkan pada klik tombol.

Mari kita lanjutkan ke bagian JavaScript dari kode:



< jenis skrip = 'teks/javascript' >
fungsi ubahIframe ( mengubah ) {
dokumen. getElementById ( 'halaman web' ) . src = mengubah ;
}
naskah >

Dalam cuplikan kode di atas:

  • Mendeklarasikan fungsi bernama “ ubahIframe() ”.
  • Dalam definisinya, akses tautan yang ditentukan di ' bingkai sebaris elemen ” menggunakan document.getElementById() ' metode.
  • Setelah itu, terapkan “ src ” dan alokasikan tautan yang disebutkan pada akses fungsi ke tautan yang diakses menggunakan parameter “ mengubah ”.
  • Ini akan mengakibatkan pergantian halaman sehubungan dengan tautan yang ditentukan pada klik tombol.

Keluaran

Pada output di atas, dapat diamati bahwa halaman dialihkan saat mengklik tombol.

Pendekatan 2: Ubah Sumber Iframe dalam JavaScript Menggunakan Properti SelectedIndex

' indeks terpilih ” properti mengembalikan indeks opsi yang dipilih dalam daftar drop-down. Properti ini dapat diterapkan untuk mengarahkan ulang ke tautan yang ditentukan sehubungan dengan nilai opsi yang dipilih dari daftar turun bawah.

Contoh
Mari kita perhatikan contoh berikut:

< tengah >< tubuh >
< id iframe = 'halaman web' src = 'https://linuxhint.com/detect-tab-key-javascript/' lebar = '1000' tinggi = '550' batas bingkai = '0' bergulir = 'Tidak' > iframe >
< br >< br >
< pilih identitas = 'tautan' >
< nilai opsi = “https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/” > Beralih ke Artikel 1
< nilai opsi = “https://linuxhint.com/convert-array-to-object-javascript/” > Beralih ke Artikel dua
Pilih >
< br >< br >
< tombol diKlik = 'ubahIframe();' > Ubah Iframe Src tombol >
< br >< br >
tubuh > tengah >

Pada baris kode di atas, lakukan langkah-langkah berikut:

  • Ingat langkah untuk menentukan tautan yang disebutkan di dalam '