Cara mudah open new window/tab dengan javascript tanpa di blok oleh Browser
Artikel ini akan membahas bagaimana cara membuka tab baru dengan menggunakan javascript tanpa diblok oleh Browser.
Window open adalah method yang disediakan oleh browser untuk membuka tab baru dengan menggunakan javascript. Dengan method ini, maka pengembang dapat membuka tab baru pada saat pengguna melakukan sesuatu, misalkan klik tombol atau gambar atau yang lainnya.
Tapi, bukankan sudah ada anchor dengan href ? Memang betul, tetapi anchor ini dalam keadaan tertentu kurang fleksibel untuk digunakan. Misalkan, kita ingin sebelum tab baru muncul, dilakukan suatu proses terlebih dahulu. Contoh, pada saat pengguna klik suatu tombol, lakukan validasi/pengecekan terlebih dahulu, jika valid maka baru munculkan window/tab baru, sedangkan jika tidak valid maka abaikan.
Syntax
Berikut ini adalah beberapa variasi sintak method windows.open
open()
open(url)
open(url, target)
open(url, target, windowFeatures)
url
Adalah url atau path dari halaman yang ingin dimunculkan. Jika kosong, maka window atau tab kosong yang akan muncul.
target
Adalah target atau dimana window/tab baru akan dimunculkan. Berikut ini beberapa pilihan untuk target:
- _self
- _blank
- _parent
- _top
windowFeatures
Adalah fitur dari window yang ingin diaktifkan, yang dituliskan dalam bentuk comma-separated.
Silahkan klik tautan
api window open ini
untuk melihat daftar lengkap window feature yang dapat diaktifkan.
Open Window/tab tanpa kena blok di Browser
Untuk membuka window atau tab tanpa kena blok oleh browser, kuncinya adalah, langsung buka window/tab pada saat pengguna melakukan aksi. Artinya, jika diperlukan proses atau validasi pada saat pengguna melakukan aksi, maka lakukan proses/validasi tersebut setelah membuka window/tab dengan url atau konten kosong.
Contoh:
Pada saat pengguna meng-klik suatu tombol, lakukan validasi, jika valid maka baru buka window atau tab baru. Seperti contoh kode
di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<button onclick="opentab()">Open new tab</button>
<script>
function callApi() {
return new Promise(function (resolve) {
setTimeout(function () {
resolve();
}, 1000);
});
}
function opentab() {
var page = window.open("", "_blank", "width=200,height=200");
page.document.write("<p>Loading....</p>");
callApi()
.then(function () {
page.location.href = "index2.html";
})
.catch(function () {
page.close();
});
}
</script>
</body>
</html>
Perhatikan kode untuk fungsi callApi. Fungsi ini untuk mensimulasikan proses yang harus dilakukan setelah pengguna meng-klik tombol.
Baca juga :
Membuat promise based Modal/Dialog dengan menggunakan Vue 3 dan Quasar
Dan seperti disebutkan di awal, bahwa, untuk menghidari blok dari Browser, maka pastikan Anda langsung memanggil window.open pada saat pengguna melakukan aksi, dalam hal ini klik tombol. Dan karena akan dilakukan proses terlebih dahulu, maka isi window/tab tersebut dengan blank url dan konten yang sesuai. Pada contoh kode ini adalah menampilan tulisan Loading...
Jika proses berhasil, maka baru isi url dari window/tab dengan url tertentu atau mungkin dari hasil proses tersebut. Dan jika gagal, maka tutup window/tab tersebut.
function opentab() {
var page = window.open("", "_blank", "width=200,height=200");
page.document.write("<p>Loading....</p>");
callApi()
.then(function() {
page.location.href = "index2.html";
})
.catch(function() {
page.close();
});
}Dengan cara ini, maka window/tab yang Anda buka dengan javascript tidak akan diblok oleh Browser.
Sekian tip dan trik kali ini. Selamat mencoba dan semoga yang sedikit ini bermanfaat.