Iframe (Bingkai) adalah dokumen HTML yang disispkan dalam dokumen HTML lain di situs web. Elemen iFrame pada HTML sering digunakan untuk memasukkan konten dari sumber lain, seperti iklan dan video ke dalam halaman Web. Meskipun iFrame berperilaku seperti gambar, tetapi iframe dapat dikonfigurasi dengan scrollbar untuk halaman website yang berada pada iframe itu sendiri. Tetapi apabila teman-teman mempunyai dua buah link yang akan di tampilkan dalam satu iframe dan teman-teman ingin mengubah lebar iframe pada setiap linknya teman-teman harus memodifikasi properti iframe itu dan menambahkan kode jQuery. Pada tutorial singkat kali ini saya akan mencoba berbagi Cara Membuat Iframe Dinamis Menggunakan JQuery.

Langsung saja saya akan memberikan langkah-langkah Cara Membuat Iframe Dinamis Menggunakan JQuery, berikut langkah-langkahnya:

– Pertama teman-teman buka text editor teman-teman dan ketikan kode html di bawah ini:

Keterangan fungsi class dan id ada pada commenting di kode html.

– Kedua teman-teman ketikan script di bawah ini:

teman-teman save dengan nama script.js. setelah itu teman-teman link kan script yang tadi kita buat dan jangan lupa link kan juga dengan jquerynya, silahkan teman-teman ketikan link di bawah ini:

Nah setelah selesai di save teman-teman buka file html teman-teman di browser, maka akan tampil seperti gambar di bawah ini:

Cara Membuat Iframe Dinamis Menggunakan JQuery

Coba teman-teman arahkan kursor ke link dumetschool.com dan klik linknya maka iframe akan menampilkan website dumetschool.com dengan width yang telah kita berikan:

Cara Membuat Iframe Dinamis Menggunakan JQuery

Begitupula sebaliknya apabila teman-teman arahkan kursor ke link kursuswebsite.org dan klik linknya maka iframe akan menampilkan website kursuswebsite.org dengan width yang telah kita berikan:

Cara Membuat Iframe Dinamis Menggunakan JQuery

Nah teman-teman kita sudah mempunyai dua link dalam satu iframe dan memiliki lebar yeng berbeda pada saat kita klik salah satu linknya.

Bagaimana teman-teman cukup mudahkan Membuat Iframe Dinamis Menggunakan JQuery.

Sekian tutorial singkat kali ini tentang Cara Membuat Iframe Dinamis Menggunakan JQuery. Semoga bermanfaat bagi teman-teman.