Dasar membuka new Window dengan Javascript

Membuat Window baru di browser dapat kita lakukan dengan menggunakan Javascript. Teknik ini mungkin berguna apabila kita ingin misalnya menampilkan detail produk yang ada. Berikut ini saya coba jelaskan bagaimana menggunakannya dengan javascript.

Langsung saja ya ke codingnya,

Pertama anggap ada tokobuku.html sebagai indexnya, berikut adalah codenya :

<HTML>
<HEAD>
<TITLE>Toko Buku</TITLE>
<SCRIPT LANGUAGE="JavaScript">

	function showDetails(bookURL){
	   window.open(bookURL,"bookDetails","width=400,height=350");
	}

</SCRIPT>
</HEAD>
<BODY>
<H2 ALIGN=center>Buku-Buku Yang Tersedia</H2>
<P>
Untuk melihat detail buku, silahkan mengklik gambarnya.
</P>
<STRONG>Aku</STRONG>
<BR>
<A NAME="Aku_Link" HREF=""
   onclick="return showDetails('aku_details.html')">
      <IMG SRC="aku.jpg" BORDER=0>
</A>

<BR><BR>
<STRONG>Dunia Adin</STRONG>
<BR>
<A NAME="Dunia_Adin_Link" HREF=""
   onclick="return showDetails('dunia_adin_details.html')">
      <IMG SRC="dunia_adin.jpg" BORDER=0>
</A>

</BODY>
</HTML>

Tidak usah di copy paste,,saya sudah buat zip nya diakhir artikel ini.

Tampilannya akan seperti ini nantinya :

Lalu sekarang kita buat detail dari masing-masing buku.
Buat file aku_details.html, berikut codenya :

<HTML>
<HEAD>
<TITLE>Aku</TITLE>
</HEAD>
<BODY>
<STRONG>Detail Buku "Aku"</STRONG>

<HR COLOR=#cc3333>

Pengarang : Bpk Gendon<br />
Penerbit : Cahaya Penerbit<br />
Harga : Rp. 30.000

</BODY>
</HTML>

Sederhana aja, lalu buat juga detail dari buku Dunia Adin
Dunia_adin_details.html

<HTML>
<HEAD>
<TITLE>Dunia Adin</TITLE>
</HEAD>
<BODY>
<STRONG>Detail Buku "Dunia Adin"</STRONG>

<HR COLOR=#cc3333>

Pengarang : Bpk Turahman<br />
Penerbit : Cahaya Penerbit<br />
Harga : Rp. 35.000

</BODY>
</HTML>

Bila sudah, nanti tampilan saat salah satu gambar buku tersebut di klik adalah seperti ini kurang lebih.

Nah, seperti itulah maksud dari membuat / membuka window baru. Saat gambar buku diklik, maka muncul detail buku dengan window baru.
Berikut adalah penjelasan code, terutama yang di tokobuku.html.

Fokuskan dulu pada fungsi showDetails di javascript. Fungsi tersebut memiliki parameter masukan yaitu bookURL(alamat buku). Lalu di dalam fungsi terdapat code :

window.open(bookURL,"bookDetails","width=400,height=350");

Code itulah yang membuka window baru yaitu window.open(). Lihat terdapat 3 parameter pada method open() yaitu :

  1. bookURL, adalah alamat dari file yang hendak dibuka
  2. “bookDetails”, adalah nama dari window yang dibuka (ingat, bukan title windownya ya..)
  3. “width=400, height=350”, adalah ukuran / size dari window yang mau dibuka

Ketiga parameter tersebut yang biasanya digunakan untuk membuka window baru

Parameter pertama :
bookURL isinya adalah alamat file yang hendak dibuka, didapat dari kondisi gambar saat diklik. Lihat pada code ini :

<A NAME="Dunia_Adin_Link" HREF=""
   onclick="return showDetails('dunia_adin_details.html')">
      <IMG SRC="dunia_adin.jpg" BORDER=0>
</A>

Lihat, saat diklik (onclick) memanggil fungsi showDetails dimana parameternya langsung menempatkan “dunia_adin_details.html”. Jadi saat kita mengklik gambar buku “Dunia Adin”, maka value dari bookURL adalah “dunia_adin_details.html

Parameter kedua :

Lalu “bookDetails” adalah nama dari window yang hendak dibuka. Baik buku “Dunia Adin” maupun buku “Aku” memiliki nama window yang sama yaitu “bookDetails”. Kenapa ? Itu hanya penamaan, tapi tetap penamaan itu memberikan pengaruh. Jadi apabila kita mengklik buku “Dunia Adin” lalu muncul window baru “dunia_adin_details.html”, dan apabila kita mengklik buku “Aku” dalam kondisi window baru “dunia_adin_detail.html” tidak dikeluarkan maka detail buku “Aku” tidak akan membuka window baru karena sudah ada window dengan nama “bookDetails” yaitu detail buku milik “Dunia Adin”.

Parameter ketiga :

Pada parameter ketiga hanya size dari window baru, lebar = 400 pixel dan tinggi = 350 pixel. Kita bisa ubah kedua value tersebut.

Sampai sini semoga jelas penggunaan window baru dengan Javascript. Lebih jauh mengenai window.open() bisa diutak-atik di link berikut :

Sample tutorial dapat di download disini :

[ download code ]

Semoga bermanfaat ya,,

Iklan

8 thoughts on “Dasar membuka new Window dengan Javascript

  1. mas cara buat atau nampilin code trus klo ada si area kodenya ada keterangan plihan view source,copy to clipboard, printer,? itu gmn kayak pnya mas yang diatas misalnya…

Silahkan Komentar...

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s