Membuka dan Menutup Layar HTML window.open dan window.close DOM
Properti window.open() dan window.close() merupakan properti yang digunakan untuk membuka dan menutup halaman web pada new window.
Sebelum memahami lebih dalam materi tentang Membuka dan Menutup Layar HTML window.open dan window.close DOM, terlebih dahulu pelajari materi tentang: Menggerakkan Layar HTML Menggunakan moveTo Window DOM, Menggerakkan Layar HTML Menggunakan moveBy Window DOM, dan Mengatur Gaya Komputasi HTML Menggunakan getComputedStyle DOM.
Sintak window open: window.open(URL, name, specs, replace)
Parameter window open: Terdiri dari empat parameter yang dijelaskan sebagai berikut.
Return Values Window Open: Berfungsi untuk mengembalikan nilai new window.
Sintak window close: window.close()
Parameter window close: Parameter ini tidak mengandung nilai parameter apapun.
Return Values Window Close: Properti ini tidak mengembalikan nilai apapun pada browser.
Contoh: Berikut adalah ilustrasi contoh penggunaan properti window.open() dan window.close() pada jQuery.
Sebelum memahami lebih dalam materi tentang Membuka dan Menutup Layar HTML window.open dan window.close DOM, terlebih dahulu pelajari materi tentang: Menggerakkan Layar HTML Menggunakan moveTo Window DOM, Menggerakkan Layar HTML Menggunakan moveBy Window DOM, dan Mengatur Gaya Komputasi HTML Menggunakan getComputedStyle DOM.
Sintak window open: window.open(URL, name, specs, replace)
Parameter window open: Terdiri dari empat parameter yang dijelaskan sebagai berikut.
- URL: Merupakan parameter opsional yang digunakan untuk mengatur nilai URL dari halaman web yang akan dibuka. Jika nilai URL tidak diatur pada properti window.open(), maka akan dibuka window barus pada blank window.
- name: Merupakan parameter opsional yang digunakan untuk mengatur nama window.
- specs: Merupakan parameter opsional yang digunakan untuk memisahkan item menggunakan tanda koma.
- replace: Merupakan parameter opsional yang digunakan untuk menentukan nilai URL yang diciptakan untuk entry baru atau mengganti nilai entry saat ini pada daftar history. Paremeter ini mengembalikan nilai bolean yang terdiri dari dua kondisi true atau false. Jika parameter mengembalikan nilai true, maka URLS akan mengganti dokumen saat ini pada daftar history. Jika nilai yang dikembalikan properti adalah false maka URL akan membuat daftar entry baru pada daftar history.
Return Values Window Open: Berfungsi untuk mengembalikan nilai new window.
Sintak window close: window.close()
Parameter window close: Parameter ini tidak mengandung nilai parameter apapun.
<!DOCTYPE html>
<html>
<head>
<title>
Properti window open dan
window close DOM pada HTML
</title>
<script>
var Window;
// Function untuk membuka new
// window
function windowOpen()
{
Window = window.open(
"https://www.www.penelitian.id/",
"_blank",
"width=400, height=450");
}
// Fungsi untuk menutup
// window
function windowClose()
{Window.close();}
</script>
</head>
<body>
<button
onclick="windowOpen()">
Open Window
</button>
<button
onclick="windowClose()">
Close Window
</button>
</body>
</html>
Output:
Pengembangan aplikasi berbasis halaman web sering kali memerlukan interaksi antara berbagai elemen dalam halaman tersebut. Salah satu interaksi yang umum digunakan adalah membuka dan menutup layar atau jendela baru. Dalam konteks ini, objek pemrograman yang sering digunakan adalah window.open dan window.close. Kedua objek ini merupakan bagian dari pengelolaan jendela dalam pemrograman halaman web yang menggunakan dokumen objek model atau lebih dikenal dengan singkatan DOM. Melalui objek-objek ini, pengembang dapat memberikan kontrol lebih lanjut atas bagaimana halaman web tersebut ditampilkan pada layar pengguna.
Window.open adalah metode yang digunakan untuk membuka jendela atau tab baru dalam sebuah aplikasi web. Secara tradisional, jendela baru ini sering kali digunakan untuk menampilkan halaman web lain atau menampilkan konten berbeda yang relevan dengan apa yang sedang diakses oleh pengguna. Dengan menggunakan window.open, pengembang dapat menentukan beberapa parameter, seperti ukuran jendela baru, posisi di layar, dan jenis-jenis pengaturan lainnya yang mempengaruhi bagaimana jendela tersebut muncul. Fungsi ini memungkinkan pengguna untuk memiliki pengalaman interaksi yang lebih dinamis dengan aplikasi web.
Penggunaan window.open tidak hanya terbatas pada membuka halaman baru, namun juga memungkinkan untuk menampilkan jendela atau tab yang bersifat lebih fleksibel. Misalnya, dengan window.open, jendela baru bisa disesuaikan sedemikian rupa agar memiliki tampilan tertentu yang berbeda dari halaman utama, seperti ukuran jendela yang lebih kecil atau letak jendela yang diatur agar tidak mengganggu tampilan halaman utama. Hal ini sangat berguna pada aplikasi web yang memerlukan tampilan tambahan tanpa mengalihkan perhatian dari halaman utama.
Namun, meskipun window.open menawarkan banyak manfaat, penggunaan metode ini juga memerlukan perhatian lebih terhadap pengaruhnya terhadap pengalaman pengguna. Terlalu banyak membuka jendela baru secara otomatis dapat mengganggu pengalaman pengguna, terlebih lagi jika jendela baru tersebut mengandung iklan atau konten yang tidak diinginkan. Oleh karena itu, penting bagi pengembang untuk bijaksana dalam menggunakan window.open dan memastikan bahwa setiap jendela yang dibuka memberikan nilai tambah bagi pengguna.
Baca Juga:
Sebaliknya, window.close adalah metode yang digunakan untuk menutup jendela atau tab yang telah dibuka sebelumnya. Biasanya, window.close digunakan untuk menutup jendela yang dibuka menggunakan window.open. Fungsi ini sangat berguna dalam konteks aplikasi web yang mengharuskan pengguna untuk mengakhiri sesi tertentu atau keluar dari tampilan tambahan yang tidak lagi diperlukan. Dalam aplikasi web yang lebih kompleks, seperti aplikasi perbankan atau e-commerce, window.close dapat digunakan setelah pengguna menyelesaikan transaksi atau saat selesai meninjau konten tertentu yang dibuka di jendela tambahan.
Namun, perlu diingat bahwa window.close hanya dapat digunakan untuk menutup jendela yang dibuka dengan window.open. Jendela utama yang memuat halaman pertama dari aplikasi web tidak bisa ditutup dengan window.close. Pembatasan ini ada untuk mencegah penyalahgunaan dan memberikan kontrol yang lebih besar kepada pengguna atas pengalaman yang diterima. Dengan cara ini, pengguna tetap memiliki kendali penuh terhadap jendela atau tab yang sedang digunakan, tanpa khawatir ada hal yang ditutup secara otomatis tanpa izin.
Pemrograman yang baik harus mengutamakan pengalaman pengguna. Oleh karena itu, meskipun window.open dan window.close dapat memberikan kemudahan dalam mengelola tampilan jendela, pengguna harus diberi kendali penuh terhadap interaksi ini. Sebagai contoh, tidak jarang terjadi bahwa pengguna merasa terganggu ketika jendela yang dibuka secara otomatis tanpa adanya permintaan atau interaksi sebelumnya. Dengan demikian, sangat penting bagi pengembang untuk memastikan bahwa jendela atau tab yang dibuka melalui window.open hanya muncul ketika benar-benar diperlukan, serta selalu memberi pilihan kepada pengguna untuk menutupnya sesuai keinginan.
Berkaitan dengan pengelolaan jendela menggunakan window.open dan window.close, pengembang harus juga mempertimbangkan kompatibilitas antar perangkat. Jendela yang dibuka pada perangkat desktop mungkin memiliki tampilan yang berbeda pada perangkat seluler. Hal ini mengharuskan pengembang untuk memperhatikan desain responsif, dimana pengaturan ukuran dan posisi jendela dapat disesuaikan dengan perangkat yang digunakan. Misalnya, pada perangkat seluler, membuka jendela dengan ukuran yang sangat besar dapat mengganggu tampilan dan membuat pengalaman pengguna menjadi tidak nyaman. Oleh karena itu, dalam merancang tampilan jendela baru, penting untuk mempertimbangkan aspek-aspek tersebut agar pengalaman pengguna tetap konsisten di berbagai perangkat.
Pengelolaan jendela juga berhubungan dengan keamanan dan kebijakan browser. Beberapa browser dapat membatasi penggunaan window.open dan window.close untuk menghindari praktik yang dianggap mengganggu. Misalnya, banyak browser modern yang membatasi pembukaan jendela baru otomatis tanpa adanya tindakan langsung dari pengguna, seperti klik tombol. Ini dilakukan untuk menghindari perundungan terhadap pengalaman pengguna yang disebabkan oleh pembukaan jendela pop-up yang tidak diinginkan. Oleh karena itu, pengembang harus selalu memperhatikan pembaruan kebijakan dan pembatasan dari browser yang digunakan oleh sebagian besar pengguna untuk memastikan bahwa aplikasi web yang dikembangkan tidak terkena dampak pembatasan ini.
Selain itu, penggunaan window.open dan window.close dalam pengembangan aplikasi web juga membutuhkan pemahaman mengenai alur navigasi dalam aplikasi. Penggunaan metode ini tidak seharusnya menggantikan alur utama aplikasi atau membingungkan pengguna. Jendela baru yang dibuka sebaiknya berfungsi untuk memberikan informasi tambahan atau memungkinkan interaksi lebih lanjut tanpa mengubah navigasi utama dari aplikasi web. Sebagai contoh, aplikasi yang menggunakan jendela baru untuk menampilkan informasi detail atau formulir pengisian data harus memastikan bahwa jendela utama tetap dapat diakses dengan mudah tanpa kesulitan.
Dalam beberapa kasus, pengembang juga dapat memanfaatkan teknik untuk meminimalisir gangguan pada pengguna dengan memanfaatkan jendela modal. Jendela modal adalah jendela yang muncul di atas jendela utama namun tidak membuka tab baru. Jendela modal ini umumnya digunakan untuk menampilkan pesan konfirmasi, form pengisian, atau notifikasi penting lainnya tanpa meninggalkan halaman utama. Meskipun berbeda dengan window.open, konsep dasar jendela modal tetap terkait erat dengan kontrol tampilan dan interaksi pengguna, yang merupakan salah satu tujuan utama dari penggunaan metode window.open dan window.close.
Secara keseluruhan, pengelolaan jendela dalam aplikasi berbasis web menggunakan window.open dan window.close merupakan elemen penting dalam desain pengalaman pengguna. Keduanya memberikan fleksibilitas dalam mengatur tampilan dan interaksi antara pengguna dengan aplikasi, tetapi juga membawa tanggung jawab untuk memastikan bahwa pengguna tidak merasa terganggu atau kehilangan kontrol terhadap aplikasi tersebut. Pengembang harus berhati-hati dalam memutuskan kapan dan bagaimana menggunakan kedua metode ini, dengan memperhatikan faktor-faktor seperti keamanan, kenyamanan, dan desain responsif agar aplikasi web yang dikembangkan dapat memberikan pengalaman yang positif bagi pengguna.
Referensi Tambahan:
- Melakukan Gulir HTML Menggunakan scrollTo Window DOM
- Mengatur Waktu HTML Menggunakan setTimeout dan setInterval Window DOM
- Menghentikan Layar HTML Menggunakan Stop Window DOM
- Membuat Kunci Penyimpanan HTML Menggunakan Storage Key DOM
- Mengatur Nilai Penyimpanan HTML Menggunakan Storage Length DOM
- Mendapatkan Item Penyimpanan HTML Menggunakan Storage getItem DOM
- Mengatur Penyimpanan Item HTML Menggunakan Storage setItem DOM
Artikel ini akan dibaca oleh: Nandya Febrilia Hilmasari, Nanik Sri Puji Rahmawati, Nathanael Yapanani, Nirossa Lusardi, dan Nor Eka Adi Suryanto.
7 komentar untuk "Membuka dan Menutup Layar HTML window.open dan window.close DOM"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Ada berapa jenis browser yang dapat digunakan pengembang untuk mengaktifkan properti window.open() dan window.close() DOM pada HTML?
BalasHapusBerikut ini beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti window.open() dan window.close() DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan method open() DOM pada HTML?
BalasHapusProperti method window.open() DOM pada HTML merupakan properti yang digunakan untuk membuka window pada browser baru, atau tab baru, bergantung pada nilai pengaturan browser dan nilai parameter yang digunakan oleh user.
HapusMethod window.close() merupakan method yang digunakan untuk menutup window yang sedang digunakan saat ini, atau window yang nilainya sedang dipanggil saat ini.
HapusMethod window.close() adalah method yang hanya dapat dipanggil pada window yang dibuka oleh script yang menggunakan method window.open(). Jika tidak, maka akan terjadi kesalahan pada saat proses menutupnya.
HapusProperti close() window adalah properti yang tidak akan berpengaruh ketika properti yang dipanggil pada object window dikembalikan oleh HTMLIFrameElement.contentWindow.
Hapus