Cara menggunakan innerhtml alternative mdn

Jendela popup adalah salah satu metode tertua untuk menampilkan tambahan dokumen kepada pengguna. Secara umum, kamu hanya menjalankan:

window.open('https://javascript.info/')

…Dan akan terbuka jendela baru yang telah diberi URL, Kebanyakan peramban moderen akan membuka jendela baru bukannya jendela terpisah. Popup ada sejak jaman dahulu. Ide awalnya adalah untuk menampilkan konten lain tanpa menutup jendela utama. Saat ini, ada cara lain untuk melakukan hal tersebut: Kita bisa membuka konten secara dinamis dengan fetch dan menampilkannya di dalam sebuah

// popup diblokir
window.open('https://javascript.info');

// popup diperbolehkan
button.onclick = () => {
  window.open('https://javascript.info');
};

Kemudian, popups itu rumit di perangkat seluler, karena tidak menampilkan beberapa jendela secara serempak.

Namun, ada tugas dimana popups masih digunakan, misalnya untuk otorisasi OAuth (masuk dengan Google/Facebook/…), karena:

1. Popup adalah sebuah jendela terpisah dengan ekosistem Javascript independennya sendiri. Sehingga aman membuka popup dari situs pihak ketiga yang tidak terpercaya.
2. Sangat mudah untuk membuka popup.
3. Sebuah popup dapat menavigasi (merubah URL) dan mengirimkan pesan ke pembuka jendela.

Di masa lalu, situs jahat sering sekali menyalahgunakan popups. Sebuah halaman jahat dapat membuka banyak sekali jendela popup dengan iklan. Sehingga saat ini kebanyakan peramban mencoba untuk memblokir dan melindungi pengguna.

Kebanyakan peramban akan memblokir popups jika dipangil dari luar aktifitas yang dipicu oleh pengguna seperti

// popup diblokir
window.open('https://javascript.info');

// popup diperbolehkan
button.onclick = () => {
  window.open('https://javascript.info');
};

Sebgai contoh:

// popup diblokir
window.open('https://javascript.info');

// popup diperbolehkan
button.onclick = () => {
  window.open('https://javascript.info');
};

Dengan cara ini pengguna agak terlindungi dari popups yang tidak diinginkan dan fungsionalitasnya tidak dinonaktifkan secara total. Bagaimana jika popups dibuka dari

// popup diblokir
window.open('https://javascript.info');

// popup diperbolehkan
button.onclick = () => {
  window.open('https://javascript.info');
};

// popup diblokir
window.open('https://javascript.info');

// popup diperbolehkan
button.onclick = () => {
  window.open('https://javascript.info');
};

Coba kode berikut:

// terbuka setelah 3 detik
setTimeout(() => window.open('http://google.com'), 3000);

Popup terbuka di Chrome, namun diblokir di Firefox.

…Jika kita mengurangi penundaan, popup akan bekerja di Firefox juga:

// open after 1 seconds
setTimeout(() => window.open('http://google.com'), 1000);

Perbedaannya adalah Firefox memperlakukan sebuah timeout antara 2000ms atau kurang dari itu untuk dapat diterima, namun lebih dari itu – hilangkan “kepercayaan”, Firefox berasumsi bahwa saat ini “diluar kendali pengguna”. Sehingga yang pertama akan diblokir, dan yang kedua tidak.

Sintak untuk membuka popup adalah:

// popup diblokir
window.open('https://javascript.info');

// popup diperbolehkan
button.onclick = () => {
  window.open('https://javascript.info');
};

// popup diblokir
window.open('https://javascript.info');

// popup diperbolehkan
button.onclick = () => {
  window.open('https://javascript.info');
};

// popup diblokir
window.open('https://javascript.info');

// popup diperbolehkan
button.onclick = () => {
  window.open('https://javascript.info');
};

Pengaturan untuk

// popup diblokir
window.open('https://javascript.info');

// popup diperbolehkan
button.onclick = () => {
  window.open('https://javascript.info');
};

• Posisi:

  • // popup diblokir
    window.open('https://javascript.info');
    
    // popup diperbolehkan
    button.onclick = () => {
      window.open('https://javascript.info');
    };

    9 (numeric) – mengatur sudut jendela atas-kanan di layar. Namun ada batasan: sebuah jendela baru tidak bisa diposisikan tersembunyi.

  • // terbuka setelah 3 detik
    setTimeout(() => window.open('http://google.com'), 3000);

    0 (numeric) – Lebar dan tinggi dari jendela baru. Namun ada batasan pada Lebar/tinggi minimal, sehingga tidak mungkin untuk membuat jendela tidak terlihat.
• Fitur jendela:

  • // terbuka setelah 3 detik
    setTimeout(() => window.open('http://google.com'), 3000);

    1 (yes/no) – menampilkan atau menyembunyikan menu peramban pada jendela baru.

  • // terbuka setelah 3 detik
    setTimeout(() => window.open('http://google.com'), 3000);

    2 (yes/no) – menampilkan atau menyembunyikan navigasi bar peramban (kembali, kedepan, isi ulang dan sebagainya) pada jendela baru.

  • // terbuka setelah 3 detik
    setTimeout(() => window.open('http://google.com'), 3000);

    3 (yes/no) – menampilkan atau menyembunyikan URL pada jendela baru. FF dan IE tidak mengizinkan untuk meyembunyikan URL secara default

  • // terbuka setelah 3 detik
    setTimeout(() => window.open('http://google.com'), 3000);

    4 (yes/no) – menampilkan atau menyembunyikan bar status. Sekali lagi kebanyakan peramban memaksa untuk menampilkannya.

  • // terbuka setelah 3 detik
    setTimeout(() => window.open('http://google.com'), 3000);

    5 (yes/no) – mengizinkan atau menolak untuk merubah ukuran jendela baru. Tidak direkomendasikan.

  • // terbuka setelah 3 detik
    setTimeout(() => window.open('http://google.com'), 3000);

    6 (yes/no) – mengizinkan atau menolak scrollbars. untuk jendela baru. Tidak direkomendasikan.

Ada juga sedikit dukungan untuk fitur spesifik peramban, Dimana biasanya tidak digunakan. Periksa window.open in MDN Sebagai contoh.

Mari buka jendela dengan pengaturan fitur paling sedikit untuk melihat fitur mana yang akan diizinkan atau tidak oleh peramban:

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

Dalam contoh kebanyakan “fitur jendela” telah dinonaktifkan dan jendela berada di luar layar. Jalankan dan lihat apa yang terjadi. Kebanyakan peramban akan “Memperbaiki” hal-hal yang ganjil seperti

// terbuka setelah 3 detik
setTimeout(() => window.open('http://google.com'), 3000);

// popup diblokir
window.open('https://javascript.info');

// popup diperbolehkan
button.onclick = () => {
  window.open('https://javascript.info');
};

Mari tambahkan opsi penempatan normal dan masuk akal untuk koordinat

// terbuka setelah 3 detik
setTimeout(() => window.open('http://google.com'), 3000);

// open after 1 seconds
setTimeout(() => window.open('http://google.com'), 1000);

// open after 1 seconds
setTimeout(() => window.open('http://google.com'), 1000);

// open after 1 seconds
setTimeout(() => window.open('http://google.com'), 1000);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

Kebanyakan peramban menampilkan contoh diatas sesuai dengan yang diinginkan.

Aturan untuk penggaturan yang dihilangkan:

• Jika tidak ada argumen ketiga di dalam pemanggilan

  // open after 1 seconds
  setTimeout(() => window.open('http://google.com'), 1000);

  3, atau kosong, maka parameter default jendela yang akan digunakan.
• Jika ada serangkaian parameter, namun sebagian fitur

  // open after 1 seconds
  setTimeout(() => window.open('http://google.com'), 1000);

  4 diabaikan, maka fitur yang diabaikan akan diasumsikan untuk memiliki nilai

  // open after 1 seconds
  setTimeout(() => window.open('http://google.com'), 1000);

  5. Sehingga jika anda menetapkan parameter, pastikan secara eksplisit anda telah menyetel semua fitur yang dibutuhkan ke yes.
• Jika tidak ada

  // popup diblokir
  window.open('https://javascript.info');
  
  // popup diperbolehkan
  button.onclick = () => {
    window.open('https://javascript.info');
  };

  9 di dalam parameter, maka peramban akan mencoba untuk membuka sebuah jendela baru didekat jendela yang terakhir terbuka.
• Jika tidak ada

  // terbuka setelah 3 detik
  setTimeout(() => window.open('http://google.com'), 3000);

  0, maka jendela baru akan memiliki ukuran yang sama seperti jendela yang terakhir terbuka.

Pemanggilan

// open after 1 seconds
setTimeout(() => window.open('http://google.com'), 1000);

Pada contoh ini, kita menghasilkan popup konten dari Javascript:

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write("Hello, world!");

Dan disini kita memodifikasi konten setelah dimuat:

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, loading belum dimulai

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

Penting untuk dicatat: Segera setelah

// open after 1 seconds
setTimeout(() => window.open('http://google.com'), 1000);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

Same origin policy

Jendela dapat dengan leluasa mengakses konten satu sama lain hanya jika mereka datang dari asal yang sama (protocol://domain:port yang sama) Jika tidak, semisal jendela utama datang dari

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

Popup mungkin mengakses “pembuka” jendela menggunakan referensei

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write(
  "<script>window.opener.document.body.innerHTML = 'Test'<\/script>"
);

Sehingga terjadi koneksi dua arah antara jendela: jendela utama dan popup memiliki sebuah referensi satu sama lain.

Untuk menutup sebuah jendela:

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

open('/', 'test', params);

Untuk memeriksa apakah jendela sudah tertutup:

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

Secara teknis, metode

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

// open after 1 seconds
setTimeout(() => window.open('http://google.com'), 1000);

properti

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

Code dibawah ini dimuat dan kemudian menutup jendela:

let newWindow = open('/', 'example', 'width=300,height=300');

newWindow.onload = function() {
  newWindow.close();
  alert(newWindow.closed); // benar
};

Ada metode untuk memindahkan/merubah ukuran sebuah jendela:

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write("Hello, world!");

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write("Hello, world!");

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write("Hello, world!");

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write("Hello, world!");

// terbuka setelah 3 detik
setTimeout(() => window.open('http://google.com'), 3000);

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write("Hello, world!");

Ada juga

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write("Hello, world!");

Hanya popups

Untuk mencegah penyalahgunaan, peramban biasanya memblokir metode ini. Mereka hanya bekerja baik pada popup yang kami buka, yang tidak memiliki tab tambahan.

Tidak ada modifikasi/maksimasi

Javascript tidak memiliki cara untuk mengecilkan atau memaksimalkan sebuah jendela. fungsi OS-level ini tersembunyi dari pengembang frontend metode Move/resize tidak dapat berjalan pada jendela maximized/minimized.

Kami telah membicarakan tentang mengulir jendela di bagian Window sizes and scrolling.

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write("Hello, world!");

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write("Hello, world!");

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, loading belum dimulai

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write("Hello, world!");

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, loading belum dimulai

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, loading belum dimulai

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, loading belum dimulai

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, loading belum dimulai

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

Secara teori, ada metode

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, loading belum dimulai

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, loading belum dimulai

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, loading belum dimulai

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

Meskipun, dalam praktiknya hal ini dibatasi, karena pada masa lalu halaman jahat menyalahgunakannya.

Sebagai contoh, lihat code ini:

// popup diblokir
window.open('https://javascript.info');

// popup diperbolehkan
button.onclick = () => {
  window.open('https://javascript.info');
};

Mesikipun pengguna mencoba untuk berpindah dari jendela (

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, loading belum dimulai

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

Sehingga peramban harus memperkenalkan banyak batasan kode seperti ini dan melindungi pengguna dari iklan dan halaman jahat. Mereka bergantung ke peramban.

Sebagai contoh, sebuah peramban mobile pada umumnya mengabaikan

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, loading belum dimulai

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

Masih ada beberapa kasus pengunaan menggunakan pangilan sejenis untuk menjalankan dan berguna.

Sebagai contoh:

• Saat kita membuka popup, mungkin ide yang bagus untuk menjalankan

  let newWin = window.open("about:blank", "hello", "width=200,height=200");
  
  newWin.document.write(
    "<script>window.opener.document.body.innerHTML = 'Test'<\/script>"
  );

  2. untuk beberapa kombinasi OS/peramban memastikan bahwa pengguna saat ini berada di dalam jendela baru
• Jika kita ingin melacak kapan pengunjung mengunakan web-app, kita dapat melacak

  let newWin = window.open("about:blank", "hello", "width=200,height=200");
  
  newWin.document.write(
    "<script>window.opener.document.body.innerHTML = 'Test'<\/script>"
  );

  3. Hal ini mengijinkan kita untuk menangguhkan / melanjutkan di dalam aktifitas animasi dan semacamnya. Tetapi tolong dicatat bahwa event

  let newWin = window.open("about:blank", "hello", "width=200,height=200");
  
  newWin.document.write(
    "<script>window.opener.document.body.innerHTML = 'Test'<\/script>"
  );

  4 berarti pengunjung berpindah dari jendela, teteapi mereka mungkin masih mengamatinya. Jendela berada di latar belakang, namun mungkin masih dapat dilihat.

Jendela popup jarang digunakan, karena ada beberapa alternatif: memuat dan menampilkan informasi in-page, atau di dalam iframe.

Jika kita akan membuka popup, cara yang benar adalah dengan memberitahu pengguna tentang hal ini. Sebuah ikon “jendela terbuka” dekat tautan atau tombol yang mengizinkan pengunjung untuk tetap fokus dan ingat kedua jendela.

• Popup dapat dibuka dengan pemanggilan

  let newWin = window.open("about:blank", "hello", "width=200,height=200");
  
  newWin.document.write(
    "<script>window.opener.document.body.innerHTML = 'Test'<\/script>"
  );

  5. hal ini akan mengembalikan referensi untuk jendela yang lebih baru.
• Peramban memblokir pemanggilan

  // open after 1 seconds
  setTimeout(() => window.open('http://google.com'), 1000);

  3 dari kode yang berasal dari luar aksi pengguna. Biasanya notifikasi muncul, sehingga pengguna mungkin mengizinkannya.
• Secara umum peramban membuka tab baru, tetapi jika ukuran disediakan, maka akan terbuka jendela popup.
• Popup mungkin mengakses pembuka jendela menggunakan properti

  let newWin = window.open("about:blank", "hello", "width=200,height=200");
  
  newWin.document.write(
    "<script>window.opener.document.body.innerHTML = 'Test'<\/script>"
  );

  7.
• Jendela utama dan popup dapat secara bebas membaca dan memodifikasi satu sama lain jika mereka memiliki asal yang sama. Jika tidak mereka dapat merubah lokasi satu sama lain dan bertukar pesan.

Untuk menutuo popup: gunakan pemanggilan

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write(
  "<script>window.opener.document.body.innerHTML = 'Test'<\/script>"
);

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

open('/', 'test', params);