Sign in Subscribe
Javascript

Mengendalikan Dokumen: Buka-Tutup dengan Open & Close

Mengendalikan Dokumen: Buka-Tutup dengan Open & Close
Photo by Katerina / Unsplash

JavaScript memberikan kita kemampuan untuk mengontrol dokumen dan jendela browser menggunakan metode open() dan close(). Dengan kedua metode ini, kita bisa membuka jendela baru, menampilkan dokumen, serta menutupnya secara otomatis.

Metode ini sering digunakan dalam pop-up, dynamic content loading, atau dalam aplikasi berbasis browser yang membutuhkan kontrol penuh terhadap tampilan dokumen.

Cara Kerja window.open() dan window.close()

1. Membuka Jendela Baru dengan window.open()

Metode open() digunakan untuk membuka jendela atau tab baru di browser.

Sintaks Dasar:

window.open(url, target, fitur);
  • url → URL halaman yang ingin dibuka (opsional, jika kosong akan membuka halaman baru kosong).
  • target → Nama atau parameter target (misalnya _blank, _self).
  • fitur → Opsi tambahan seperti ukuran jendela, status bar, scrollbar, dll.

Contoh:

window.open("https://example.com", "_blank", "width=600,height=400");

Kode ini akan membuka halaman example.com dalam jendela baru dengan ukuran 600x400 piksel.

2. Menutup Jendela dengan window.close()

Jika kita ingin menutup jendela yang sudah dibuka, kita bisa menggunakan close().

Sintaks Dasar:

window.close();

Catatan: Jendela yang ditutup harus dibuka dengan JavaScript. Jika pengguna mencoba menutup tab utama dengan window.close(), itu tidak akan berfungsi kecuali dijalankan oleh pop-up yang dibuka melalui script.

Contoh:

const win = window.open("https://example.com", "_blank", "width=600,height=400");
setTimeout(() => {
    win.close();
}, 5000);

Kode ini membuka halaman baru dan akan otomatis tertutup dalam 5 detik.

Contoh Penggunaan open() dan close() dalam Aplikasi

1. Membuka Jendela Baru dengan Tombol

<button id="buka">Buka Halaman Baru</button>
<script>
document.getElementById("buka").addEventListener("click", function() {
    window.open("https://example.com", "_blank");
});
</script>

Ketika tombol diklik, halaman baru akan terbuka.

2. Membuka & Menutup Jendela dengan Kontrol Manual

<button id="buka">Buka Halaman</button>
<button id="tutup">Tutup Halaman</button>
<script>
let newWindow;
document.getElementById("buka").addEventListener("click", function() {
    newWindow = window.open("https://example.com", "_blank", "width=500,height=300");
});
document.getElementById("tutup").addEventListener("click", function() {
    if (newWindow) newWindow.close();
});
</script>

Tombol pertama membuka halaman baru, sedangkan tombol kedua akan menutupnya jika halaman tersebut terbuka.

Manfaat dan Kelebihan window.open() dan window.close()

1. Membantu Pengguna Membuka Halaman Tambahan

Misalnya, dalam aplikasi e-commerce, pengguna dapat membuka halaman produk dalam tab baru tanpa kehilangan progress pada halaman utama.

2. Berguna untuk Formulir atau Checkout Pop-up

Beberapa website menggunakan jendela baru untuk menangani pembayaran atau formulir pendaftaran yang perlu tetap terbuka sementara pengguna melihat informasi lainnya.

3. Membantu dalam Debugging dan Testing

Saat mengembangkan aplikasi berbasis browser, kita dapat membuka dan menutup jendela baru untuk menguji berbagai fitur tanpa harus mengganggu halaman utama.

4. Kontrol Penuh terhadap UI/UX

Menggunakan jendela baru dengan ukuran yang disesuaikan memungkinkan kita menciptakan pengalaman pengguna yang lebih menarik, seperti tampilan preview gambar atau video dalam modal yang lebih luas.

Masalah dan Keterbatasan window.open() dan window.close()

Meskipun memiliki banyak manfaat, metode ini juga memiliki beberapa keterbatasan, di antaranya:

1. Diblokir oleh Browser Modern

Sebagian besar browser modern secara otomatis memblokir pop-up yang dibuat menggunakan window.open() jika dipanggil tanpa interaksi pengguna. Oleh karena itu, pastikan kode dijalankan melalui aksi pengguna, seperti klik tombol.

Solusi:

// Ini akan berfungsi karena dipicu oleh event klik
button.addEventListener("click", function() {
    window.open("https://example.com", "_blank");
});

2. Tidak Bisa Menutup Tab yang Dibuka Manual

Jendela utama yang dibuka langsung oleh pengguna tidak bisa ditutup menggunakan window.close(). Browser melarang script menutup tab yang bukan dibuka melalui JavaScript.

Contoh Salah:

// Ini tidak akan berfungsi pada tab utama
window.close();

3. Tidak Kompatibel di Semua Browser

Beberapa browser memiliki kebijakan berbeda terkait window.open() dan window.close(). Pastikan untuk menguji kode di berbagai browser sebelum menggunakannya dalam produksi.

Kapan Menggunakan open() dan close()?

✅ Jika ingin membuka jendela atau tab baru secara terkontrol.
✅ Jika ingin menampilkan konten di jendela terpisah dengan ukuran tertentu.
✅ Jika ingin menutup jendela pop-up yang dibuat secara dinamis.
❌ Jangan gunakan secara berlebihan karena dapat dianggap sebagai spam oleh browser modern.

Kesimpulan

  • window.open() digunakan untuk membuka jendela baru dengan berbagai parameter.
  • window.close() digunakan untuk menutup jendela yang dibuka melalui JavaScript.
  • Kedua metode ini sangat berguna dalam aplikasi berbasis web yang membutuhkan kontrol penuh terhadap dokumen dan jendela.
  • Sebaiknya gunakan dengan bijak untuk menghindari pemblokiran pop-up oleh browser.

Dengan memahami cara kerja open() dan close(), kita bisa membuat pengalaman pengguna yang lebih dinamis dan interaktif. Yuk, coba implementasikan dalam proyekmu!

Read next