Bagaimana untuk Mencipta Bar Skrol Menegak dengan 'window.open()' dalam JavaScript?

Bagaimana Untuk Mencipta Bar Skrol Menegak Dengan Window Open Dalam Javascript



The “window.open()” Kaedah JavaScript membolehkan pembangun memaut ke tetingkap lain di dalam halaman web mereka. Tetingkap ini akan dipanggil apabila tindakan tertentu dilakukan oleh pengguna.

Pendek kata, fungsi utama “window.open()” kaedahnya ialah membuka tetingkap baharu pada halaman web utama tanpa mengganggu antara muka halaman web utama. Dalam sesetengah senario, tetingkap baharu berjaya dibuka tetapi bar skrol tidak muncul sama sekali, yang menghantar kesan buruk kepada pengguna.







Panduan ringkas ini menghuraikan proses untuk mencipta bar skrol menegak dengan kaedah window.open() dalam JavaScript.



Bagaimana untuk Mencipta Bar Skrol Menegak Dengan 'window.open()' dalam JavaScript?

The “window.open()” kaedah secara lalai menambah bar skrol menegak bergantung pada panjang kandungan halaman web baharu dan saiz tetingkap yang dibuka. Jika kandungan halaman web lebih besar daripada saiz tetingkap maka, bar skrol akan ditambahkan secara lalai tanpa menggunakan sebarang sifat CSS. Walau bagaimanapun, jika pembangun ingin menambah bar skrol tersuai, maka anda boleh mengikuti kaedah yang dijelaskan dalam contoh di bawah.



Sintaks





Sintaks untuk “window.open()” kaedah dinyatakan di bawah:

tingkap. buka ( laluan , destinasi , winFeat )

di sini, “jalan” ialah laluan halaman web yang akan dibuka dalam tetingkap baharu. The 'destinasi' ialah lokasi tetingkap baharu untuk muncul, ia boleh ditetapkan kepada “kosong” , “ibu bapa” , “diri sendiri” atau “atas”. Parameter ketiga ialah ciri 'winFeat' atau tetingkap, ia menawarkan pelbagai nilai yang boleh ditetapkan mengikut keperluan untuk menyesuaikan tetingkap.



Mari kita lihat beberapa contoh untuk menjana bar skrol menegak dalam tetingkap yang baru dibuka menggunakan “window.open()” kaedah.

Contoh: Penggunaan Ciri Tetingkap “scrollbars” Dengan Kaedah “window.open()”.

Dalam kes ini, “window.open()” kaedah digunakan sepanjang 'bar skrol' Ciri Tetingkap untuk menetapkan bar skrol menegak untuk tetingkap yang baru dibuka, seperti ditunjukkan di bawah:

< kepala >
< jenis skrip = 'teks/javascript' >
fungsi setScroll ( ) {
adalah newWin = tingkap. buka ( 'https://linuxhint.com' , 'atas' , 'lebar=500,tinggi=500,bar tatal=ya' ) ;
}
skrip >
kepala >
< badan >
< hlm > Tekan butang di bawah untuk membuka Blog Linuxhint di dalam - tetingkap skrin. hlm > Klik Saya butang >
badan >

Penjelasan kod di atas:

  • Pertama, yang “setScroll()” fungsi ditakrifkan di dalam tag. Pembolehubah 'newWin' juga dicipta yang mengandungi “window.open()” kaedah di dalamnya.
  • Seterusnya, hantar parameter pertama 'pautan' halaman web ke “window.open()” kaedah. Selain itu, tetapkan nilai 'atas' untuk parameter kedua untuk memaparkan tetingkap baharu di kedudukan atas pelayar web.
  • Selepas itu, untuk menyesuaikan tingkah laku tetingkap gunakan ciri tetingkap daripada 'lebar' , 'tinggi' dan 'bar skrol' untuk menetapkan lebar dan tinggi, dan bar skrol tetingkap masing-masing.
  • Pada akhirnya, buat a “butang” elemen yang mencetuskan “setScroll()” fungsi menggunakan “onclick” pendengar acara.

Selepas akhir penyusunan, output kelihatan seperti ini:

Output mengesahkan bahawa bar skrol telah ditambahkan pada tetingkap yang baru dijana.

Contoh 2: Menetapkan Bar Skrol Secara Manual

Satu lagi cara untuk menetapkan bar skrol adalah dengan menggunakan CSS “limpahan-y” dan 'limpahan-x' hartanah di atas halaman kedua yang akan dibuka dalam tetingkap baharu, seperti yang ditunjukkan di bawah:

< kepala >
< jenis skrip = 'teks/javascript' >
fungsi setScroll ( ) {
adalah newWin = tingkap. buka ( 'https://linuxhint.com' , atas , 'lebar=500, tinggi=500, boleh diubah saiz, bar skrol=1);
}



Tekan butang di bawah untuk membuka Linuxhint Blog pada tetingkap dalam skrin.

Klik Saya

Penerangan kod di atas:

  • Pertama, buat a “setScroll()” fungsi, dan di dalamnya menggunakan “window.open()” kaedah yang sama seperti yang dilakukan dalam contoh di atas.
  • Selain itu, tambahkan ciri tetingkap tambahan bagi 'boleh diubah saiz' dan mengubah suai nilai 'bar skrol' ciri kepada '1' untuk menetapkan bar skrol menegak.

Sekarang, buka fail CSS halaman web yang pautannya disediakan sebagai parameter pertama ke “window.open()” kaedah. Dalam kes kami, nama halaman web ialah 'linuxint' jadi buka fail CSSnya dan masukkan kod berikut di dalamnya:

< gaya >
html {
melimpah - x : tersembunyi ;
melimpah - dan : auto ;
}
gaya >

Sifat CSS di atas 'limpahan-x' dan “limpahan-y” sembunyikan bar skrol mendatar dan tetapkan bar skrol menegak untuk keseluruhan halaman HTML mengikut panjang tetingkap.

Selepas memasukkan dan menyusun coretan kod di atas dalam kedua-dua fail, output kelihatan seperti ini:

Output menunjukkan bahawa bar skrol menegak telah ditambahkan pada tetingkap yang dibuka menggunakan kaedah 'window.open()'.

Kesimpulan

Untuk mencipta bar skrol menegak dengan “window.open()” kaedah, yang 'bar skrol' ciri yang disediakan oleh tetingkap boleh ditetapkan kepada “ya” atau '1' . Cara lain ialah membuka fail CSS atau HTML untuk halaman web yang pautannya dihantar sebagai parameter pertama dalam kaedah 'window.open()' dan di sana gunakan CSS 'limpahan-x' dan “limpahan-y” harta benda. Blog ini telah menerangkan cara-cara untuk menambah bar skrol menegak dengan kaedah window.open() dalam JavaScript.