Jendela popup adalah salah satu metode tertua untuk menampilkan tambahan dokumen kepada pengguna. Secara umum, kamu hanya menjalankan: Show
…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 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:
Pemblokiran PopupDi 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 Sebgai contoh:
Dengan cara ini pengguna agak
terlindungi dari popups yang tidak diinginkan dan fungsionalitasnya tidak dinonaktifkan secara total. Bagaimana jika popups dibuka dari Coba kode berikut:
Popup terbuka di Chrome, namun diblokir di Firefox. …Jika kita mengurangi penundaan, popup akan bekerja di Firefox juga:
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. window.openSintak untuk membuka popup adalah: window.name , dan dengan ini kita bisa secara spesifik menentukan jendela mana yang digunakan untuk popup. Jika telah ada jendela menggunakan nama tersebut – URL akan menjadi gantinya, jika tidak jendela baru terbuka.parameterKonfigurasi untuk jendela baru. Mengandung pengaturan, yang dipisahkan dengan koma. Tidak boleh ada spasi di dalam parameter, sebagai contoh: width=200,height=100 .Pengaturan untuk
Ada juga sedikit dukungan untuk fitur spesifik peramban, Dimana biasanya tidak digunakan. Periksa window.open in MDN Sebagai contoh. Contoh: sebuah jendela sederhanaMari buka jendela dengan pengaturan fitur paling sedikit untuk melihat fitur mana yang akan diizinkan atau tidak oleh peramban:
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 Mari tambahkan opsi penempatan normal dan masuk akal untuk koordinat
Kebanyakan peramban menampilkan contoh diatas sesuai dengan yang diinginkan. Aturan untuk penggaturan yang dihilangkan:
Mengakses popup dari jendelaPemanggilan Pada contoh ini, kita menghasilkan popup konten dari Javascript:
Dan disini kita memodifikasi konten setelah dimuat:
Penting untuk dicatat: Segera setelah
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 Mengakses jendela dari popupPopup mungkin mengakses “pembuka” jendela menggunakan referensei
Sehingga terjadi koneksi dua arah antara jendela: jendela utama dan popup memiliki sebuah referensi satu sama lain. Menutup sebuah popupUntuk
menutup sebuah jendela: Untuk memeriksa apakah jendela sudah tertutup: Secara teknis, metode properti Code dibawah ini dimuat dan kemudian menutup jendela:
berpindah dan merubah ukuran.Ada metode untuk memindahkan/merubah ukuran sebuah jendela: win.moveBy(x,y) Memindahkan jendela ke posisi x piksel ke
kanan dan y piksel kebawah. Nilai negatif dapat diterima (untuk memindahkan kiri/atas).win.moveTo(x,y) Memindahkan jendela ke koordinat (x,y) di layar.win.resizeBy(width,height) Merubah ukuran jendela dengan memberikan width/height ke ukuran sat ini. Nilai negatif dapat diterima.win.resizeTo(width,height) Merubah ukuran jendela ke ukuran yang diberikan.Ada juga 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. Gulir jendelaKami telah membicarakan tentang mengulir jendela di bagian Window sizes and scrolling. elem.scrollIntoView(top = true)
Mengulir jendela untuk membuat elem terlihat diatas atau di bawah dari elem.scrollIntoView(false) , Kemudian ada juga event window.onscroll .Fokus/kabur di jendelaSecara teori, ada metode Meskipun, dalam praktiknya hal ini dibatasi, karena pada masa lalu halaman jahat menyalahgunakannya. Sebagai contoh, lihat code ini:
Mesikipun pengguna mencoba untuk berpindah dari jendela ( 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 Masih ada beberapa kasus pengunaan menggunakan pangilan sejenis untuk menjalankan dan berguna. Sebagai contoh:
kesimpulanJendela 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.
Untuk menutuo popup: gunakan pemanggilan
Apa itu OnClick pada JavaScript?onclick = adalah event jika sebuah element html di klik.
Bagaimana membuat komentar di JavaScript?Mereka mudah ditulis dan dikenali: blok komentar JavaScript (juga dikenal sebagai komentar multi-baris) dimulai dengan * /, sedangkan komentar baris tunggal dimulai dengan //. Dalam bahasa pemrograman, komentar juga dapat digunakan untuk mencegah beberapa baris kode dieksekusi.
Apa itu event JavaScript?Pada Javascript: Event adalah kejadian yang terjadi di halaman web. Kejadian yang dimaksud di sini seperti aktivitas yang dikerjakan pada halaman web.
Apa kegunaan dari kode program alert?Alert digunakan untuk menampilkan sebuah pesan atau peringatan kepada pengguna dengan jendela dialog.
|