Itu “jendela.buka()” Metode JavaScript memungkinkan pengembang untuk menautkan ke jendela lain di dalam halaman web mereka. Jendela ini dipanggil ketika tindakan tertentu dilakukan oleh pengguna.
Singkatnya, fungsi utama dari “jendela.buka()” caranya adalah dengan membuka jendela baru di halaman web utama tanpa mengganggu antarmuka halaman web utama. Dalam beberapa skenario, jendela baru berhasil dibuka tetapi bilah gulir tidak muncul sama sekali, sehingga memberikan kesan buruk kepada pengguna.
Panduan singkat ini menguraikan proses pembuatan scrollbar vertikal dengan metode window.open() di JavaScript.
Bagaimana Cara Membuat Scrollbar Vertikal Dengan “window.open()” di JavaScript?
Itu “jendela.buka()” metode secara default menambahkan bilah gulir vertikal tergantung pada panjang konten halaman web baru dan ukuran jendela yang terbuka. Jika konten laman web lebih besar dari ukuran jendela, bilah gulir akan ditambahkan secara default tanpa menerapkan properti CSS apa pun. Namun, jika pengembang ingin menambahkan bilah gulir khusus, Anda dapat mengikuti metode yang dijelaskan pada contoh di bawah ini.
Sintaksis
Sintaks untuk “jendela.buka()” metode dinyatakan di bawah ini:
jendela. membuka ( jalur , tujuan , menangFeat )Di Sini, 'jalur' adalah jalur halaman web yang akan dibuka di jendela baru. Itu 'tujuan' adalah lokasi munculnya jendela baru, dapat diatur 'kosong' , 'induk' , 'diri sendiri' atau 'atas'. Parameter ketiga adalah “winFeat” atau fitur jendela, yang menawarkan berbagai nilai yang dapat diatur sesuai kebutuhan untuk menyesuaikan jendela.
Mari kita lihat beberapa contoh untuk menghasilkan scrollbar vertikal di jendela yang baru dibuka menggunakan “jendela.buka()” metode.
Contoh: Penggunaan Fitur Jendela “scrollbars” Dengan Metode “window.open()”.
Dalam hal ini, “jendela.buka()” metode digunakan sepanjang “bilah gulir” Fitur Jendela untuk mengatur scrollbar vertikal pada jendela yang baru dibuka, seperti gambar di bawah ini:
< kepala >< jenis skrip = 'teks/javascript' >
fungsi setGulir ( ) {
dulu kemenangan baru = jendela. membuka ( 'https://linuxhint.com' , 'atas' , 'lebar=500,tinggi=500,scrollbar=ya' ) ;
}
naskah >
kepala >
< tubuh >
< P > Tekan tombol di bawah untuk membuka Blog Linuxhint di dalamnya - jendela layar. P > Klik Saya tombol >
tubuh >
Penjelasan kode di atas:
- Pertama, itu “setGulir()” fungsi didefinisikan di dalam “
” menandai. Variabel “newWin” juga dibuat yang berisi “jendela.buka()” metode di dalamnya. - Selanjutnya, teruskan parameter pertama “tautan” halaman web ke “jendela.buka()” metode. Juga, atur nilai “top” untuk parameter kedua untuk menampilkan jendela baru di posisi teratas browser web.
- Setelah itu, untuk menyesuaikan perilaku jendela gunakan fitur jendela 'lebar' , 'tinggi' Dan “bilah gulir” untuk mengatur lebar dan tinggi, serta bilah gulir jendela masing-masing.
- Pada akhirnya, buat a 'tombol' elemen yang memicu “setGulir()” fungsi menggunakan “klik” pendengar acara.
Setelah kompilasi selesai, hasilnya terlihat seperti ini:
Outputnya mengonfirmasi bahwa scrollbar telah ditambahkan ke jendela yang baru dibuat.
Contoh 2: Mengatur Scrollbar Secara Manual
Cara lain untuk mengatur scrollbar adalah dengan memanfaatkan CSS “meluap-y” Dan “meluap-x” properti di atas halaman sekunder yang akan dibuka di jendela baru, seperti yang ditunjukkan di bawah ini:
< kepala >< jenis skrip = 'teks/javascript' >
fungsi setGulir ( ) {
dulu kemenangan baru = jendela. membuka ( 'https://linuxhint.com' , atas , 'lebar=500,tinggi=500,dapat diubah ukurannya,scrollbar=1);
}
Tekan tombol di bawah untuk membuka Blog Linuxhint di jendela dalam layar.
Klik SayaDeskripsi kode di atas:
- Pertama, buat a “setGulir()” fungsi, dan di dalamnya memanfaatkan “jendela.buka()” metode yang sama seperti yang dilakukan pada contoh di atas.
- Juga, tambahkan fitur jendela tambahan “dapat diubah ukurannya” dan mengubah nilai “bilah gulir” fitur ke '1' untuk mengatur bilah gulir vertikal.
Sekarang, buka file CSS halaman web yang tautannya disediakan sebagai parameter pertama ke “jendela.buka()” metode. Dalam kasus kami, nama halaman webnya adalah 'linuxint' jadi buka file CSS-nya dan masukkan kode berikut di dalamnya:
< gaya >html {
meluap - X : tersembunyi ;
meluap - Dan : mobil ;
}
gaya >
Properti CSS di atas dari “meluap-x” Dan “meluap-y” sembunyikan bilah gulir horizontal dan atur bilah gulir vertikal untuk seluruh halaman HTML sesuai dengan panjang jendela.
Setelah memasukkan dan mengkompilasi cuplikan kode di atas di kedua file, outputnya terlihat seperti ini:
Outputnya menunjukkan bahwa scrollbar vertikal telah ditambahkan ke jendela yang dibuka menggunakan metode “window.open()”.
Kesimpulan
Untuk membuat scrollbar vertikal dengan “jendela.buka()” metode, itu “bilah gulir” fitur yang disediakan oleh jendela dapat diatur 'Ya' atau '1' . Cara lain adalah dengan membuka file CSS atau HTML untuk halaman web yang tautannya diteruskan sebagai parameter pertama dalam metode “window.open()” dan menggunakan CSS “meluap-x” Dan “meluap-y” properti. Blog ini telah menjelaskan cara menambahkan scrollbar vertikal dengan metode window.open() di JavaScript.