Mengkomunikasikan subwindow dengan window browser utama menggunakan Javascript

, , No Comments
Pernahkah Anda menggunakan yahoo messenger versi web (web version)?
Jika belum, silahkan coba terlebih dahulu
Nah, jika anda tidak sedang sign in pada akun yahoo anda, dan anda klik tomboi Log in pada halaman yahoo messenger web version, maka muncul sebuah subwindow yang isinya berupa halaman login Yahoo. Setelah anda login lewat halaman tersebut, maka secara otomatis subwindow itu tertutup dan kemudian window utama siap digunakan untuk chatting lewat Yahoo Messenger (Jika koneksi internet lambat, maka akan ada tulisan tunggu sebelum bisa chatting).
Nah, bagaimana bisa subwindow berkomunikasi dengan window utama
sehingga jika kita telah login, window utama menuju ke halaman YM??

Nah, saya tidak akan membahas masalah itu, tapi saya akan memberikan sedikit dasar bagaimana subwindow bisa berkomunikasi dengan window utama.

OK, sekarang kita ngopi dulu, lalu siapkan:
1. notepad bagi pengguna windows OS
2. gedit bagi pengguna linux ubuntu
3. web browser yang mendukung javascript seperti Internet Explorer versi 8.0 keatas, firefox, safari, google chrome, dll (pilih salah satu ya )
4. Silahkan copy paste kan kode dibawah ini dan simpan dengan nama window.html

(input type="button" onclick="window.open('subwindow.html','subwindow','HEIGHT=200,WIDTH=200')" value="Silahkan Klik saya untuk membuka subwindow" /)

5. Jika sudah, maka silahkan copy paste lagi kode berikut ini dan simpan dengan nama subwindow.html:
(input type="button" onclick="opener.location.href='hasil.html'" value="Pindahkan halaman window utama ke hasil.html" /)

6. Dan yang terakhir buat sebuah file hasil.html yang isinya sbb:

Halaman telah berubah

Bingung???
Saya beri sedikit penjelasan.
Pertama-tama halaman window utama akan membuka subwindow jika kita klik tombolSilahkan Klik saya untuk membuka subwindow. Kenapa bisa?? Ini lah fungsi perintah darionclick="window.open('subwindow.html','subwindow','HEIGHT=200,WIDTH=200')" yang artinya jika kita mengklik tombol tersebut, maka akan dibuat sebuah subwindow dengan panjang 200px dan lebar 200px yang berisikan halaman subwindow.html

Lalu ketika kita klik tombol Pindahkan halaman window utama ke hasil.html pada subwindow, maka window utama akan berpindah ke halam hasil.html yang isinya Halaman telah berubah.

Inilah fungsi dari onclick="opener.location.href='hasil.html'" pada sub window yang berarti halaman pembuka yaitu halaman window utama akan dipindahkan menuju halaman hasil.html jika kita klik tombol tersebut.

Bagaimana?? Gampang Kan. Sekian dan terima kasih..

0 comments:

Posting Komentar

Silahkan Isi Komentar Anda