JavaScript

Cara mudah open new window/tab dengan javascript tanpa di blok oleh Browser

Artikel ini membahas bagaimana cara membuka tab baru dengan menggunakan javascript tanpa diblok oleh Browser

Tukang Debug

— 3 min read
Cara mudah open new window/tab dengan javascript tanpa di blok 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 syntax 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 di mana window/tab baru akan dimunculkan. Berikut ini beberapa pilihan untuk target:

  • _self
    Halaman baru akan ditampilkan di window atau tab yang sama dengan yang ada sekarang (windows tempat script berada).
    Pilihan ini cocok digunakan jika Anda ingin mengganti konten halaman saat ini tanpa membuka tab/window baru.
  • _blank
    URL akan di buka pada tab atau window baru. Opsi inilah yang rawan kena block dari browser jika tidak dilakukan secara benar.
  • _parent
    URL akan ditampilkan di frame induk (parent frame) dari frame tempat skrip tersebut dijalankan. Opsi ini hanya relevan jika halaman tempat script berada di sebuah frame. Jika tidak di dalam frame, maka perilakunya akan sama seperti opsi _self.
  • _top
    URL akan dibuka di window paling atas dalam hierarki frame, menggantikan semua frame yang ada. Opsi ini juga hanya releven jika script atau halaman berada di dalam beberapa lapisan frame, dan URL tersebut ingin ditampilkan di window utama. Jika tidak menggunakan frame, maka perilakunya akan sama saja dengan opsi _self.

windowFeatures

Adalah fitur dari window yang ingin diaktifkan, yang dituliskan dalam bentuk comma-separated. Klik tautan api window open ini untuk melihat daftar lengkap window feature yang dapat diaktifkan.

Cara Open new Window/tab tanpa kena blok di Browser

Untuk membuka window atau tab tanpa kena blok oleh browser, kuncinya adalah, langsung membuka window/tab pada saat pengguna melakukan aksi. Artinya, tidak ada jeda waktu atau aksi lain. Jika diperlukan proses pada saat pengguna melakukan aksi, maka lakukan proses/validasi tersebut SETELAH membuka window/tab dengan url atau konten kosong.

Jadi urutannya adalah, pengguna klik tombol/link --> buka window --> lakukan proses lain --> update konten window

Contoh:
Pada saat pengguna meng-klik suatu tombol, langsung buka window atau tab baru dengan isi konten kosong atau hanya menampilkan progress bar, lalu lakukan proses lain atau validasi, jika valid maka baru update window dengan konten baru atau url 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 men-simulasikan proses yang harus dilakukan setelah pengguna meng-klik tombol.

Dan seperti disebutkan di awal, bahwa, untuk menghindari 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 menampilkan 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.

Read more