> ## Content Index
> Fetch the complete content index at: https://debug.my.id/llms.txt
> Use this file to discover other available public pages before exploring further.

# Cara mudah open new window/tab dengan javascript tanpa di blok oleh Browser
- URL: https://debug.my.id/cara-mudah-open-new-tabwindow-dengan/
- Published: 2025-06-28T07:00:00.000Z
- Updated: 2025-07-01T08:28:00.000Z
- Description: Artikel ini membahas bagaimana cara membuka tab baru dengan menggunakan javascript tanpa diblok oleh Browser
- Author: Tukang Debug
- Tags: JavaScript, Tip/trik

**Window** **open** adalah **method** yang disediakan oleh browser untuk membuka tab baru dengan menggunakan [*javascript*](https://debug.my.id/cara-mudah-open-new-tabwindow-dengan/). 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**](https://debug.my.id/cara-mudah-open-new-tabwindow-dengan/) baru, sedangkan jika tidak valid maka abaikan.

## Syntax

Berikut ini adalah beberapa variasi syntax method windows.open

```javascript
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**](https://developer.mozilla.org/en-US/docs/Web/API/Window/open?ref=debug.my.id) 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.

```html
<!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**](https://debug.my.id/cara-mudah-open-new-tabwindow-dengan/). 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.

```javascript
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.