Lokasi Jendela
【1】 Dapatkan
Browser (Firefox tidak mendukung) memberikan properti screenLeft dan screenTop , yang digunakan untuk mewakili posisi jendela relatif terhadap sisi kiri dan atas layar masing -masing.
Ketika jendela dimaksimalkan, nilai -nilai yang dikembalikan oleh setiap browser tidak sama ketika menjalankan kode berikut. Chrome kembali ke kiri: 0; atas: 0. IE kembali ke kiri: 0; atas: 56 (jika ada bilah menu, ia kembali ke kiri: 0; atas: 78), karena yaitu menghemat jarak dari sisi kiri dan atas layar ke area yang terlihat dari halaman yang diwakili oleh objek jendela. Safari kembali ke kiri: -8; atas: -8 karena bugnya sendiri
// Pindahkan jendela, akan ada perubahan dalam nilai <div id = 'myDiv'> </div> <script> var timer = setInterval (function () {myDiv.innerHtml = 'kiri:' + window.screenleft + '; atas:' + window.screentop;}) myDiv.onCreick = function = function =) {scripser () {scripser () {scripser () {scripser () {scripser () {scripse () {scripse () {scrip {scripse) {creentop;)Hasil: Kiri: 0; Top: 93
Properti screenX dan screenY (IE8-) juga memberikan informasi posisi jendela yang sama.
[Catatan] screenLeft , screenTop , screenX dan screenY semuanya adalah properti baca saja. Memodifikasi nilainya tidak akan menyebabkan jendela bergerak.
Ketika jendela dimaksimalkan, nilai -nilai yang dikembalikan oleh setiap browser masih berbeda. Firefox kembali ke kiri: -7; atas: -7. Chrome masih kembali ke kiri: 0; atas: 0. IE9+ selalu kembali ke kiri: -7; atas: -7 terlepas dari apakah bilah menu ditampilkan atau tidak. Safari masih kembali ke kiri: -8; atas: -8 karena bugnya sendiri
<Div id = 'myDiv'> </div> <script> var timer = setInterval (function () {myDiv.innerHtml = 'Left:' + window.screenx + '; top:' + window.screeny;}) myDiv.onClick = function () {clearInterval (Timer);Hasil: Kiri: 0; Top: 93
kompatibel
Metode penulisan yang kompatibel untuk mendapatkan lokasi jendela adalah sebagai berikut
[Catatan] Karena berbagai implementasi dari setiap browser, tidak mungkin untuk mendapatkan nilai koordinat yang tepat di bawah kondisi lintas-browser.
var leftpos = (typeof window.screenleft == "nomor")? window.screenleft: window.screenx; var toppos = (typeof window.screentop == "nomor")? window.screentop: window.screeny; console.log (leftpos, toppos);
【2】 ponsel
Gunakan metode moveTo() dan moveBy() untuk memindahkan jendela ke lokasi baru. Kedua metode ini hanya didukung oleh IE browser.
moveTo() menerima dua parameter, yaitu nilai koordinat x dan y dari posisi baru
<div id = "myDiv"> Klik di sini </div> <script> // pindahkan jendela ke (0,0) myDiv.onClick = function () {window.moveto (0,100); } </script> moveBy() menerima dua parameter, yaitu jumlah piksel yang bergerak dalam arah horizontal dan vertikal.
<Div id = "myDiv"> Klik di sini </div> <script> // pindahkan jendela ke bawah dengan 100 piksel myDiv.onClick = function () {window.moveby (0,100); } </script>Ukuran jendela
【1】 Dapatkan
Properti outerWidth dan outerHeight digunakan untuk mewakili ukuran jendela browser itu sendiri.
[Catatan] IE8-browser tidak mendukung
// Chrome Returns Outterwidth: 1920; OutheHeight: 1030 // IE9 + dan Firefox Return Outerwidth: 1550; OuteHeight: 838 // Safari Returns Outerwidth: 1552; outheight: 840document.body.innerhtml = 'oUerHEWTH: outherwid: outhouth: outhouth. window.outerheight: ' + window.outerheight
Hasil: Outerwidth: 1440; OutheHeight: 743
Properti innerWidth dan innerHeight digunakan untuk mewakili ukuran halaman, yang sebenarnya sama dengan ukuran jendela browser dikurangi lebar perbatasan dan bilah menu browser sendiri, bilah alamat, bilah status, dll.
[CATATAN] Karena <Frame> sendiri juga memiliki properti jendela, jika ada bingkai di halaman, maka properti innerWidth dan innerHeight pada bingkai mengacu pada sifat innerWidth dan innerHeight bingkai itu sendiri.
// Chrome Returns Innerwidth: 1920; Innerheight: 971 // IE9+ Returns Innerwidth: 1536; Innerheight: 768 // Firefox Returns Innerwidth: 1536; InnerHeight: 755 // Safari Returns Innerwidth: 1536; innerHeight: 755 // Safari Returns Innerwidth: 1536; innerHeight: 755 // Safari Returns Innerwidth: 1536; innerHeight. 'InnerWidth:' + window.innerwidth + '; InnerHeight:' + window.innerheight: ' + window.innerheight
Hasil: Innerwidth: 701; InnerHeight: 40
document.documentElement.clientWidth dan document.documentElement.clientHeight di DOM juga dapat mewakili ukuran halaman, mengembalikan nilai yang sama seperti innerWidth dan innerHeight
[Catatan] Demikian pula, jika kerangka kerja diakses, kedua properti ini juga menunjuk ke properti kerangka kerja.
// Chrome Returns Innerwidth: 1920; InnerHeight: 971 // IE9+ Returns Innerwidth: 1536; InnerHeight: 768 // Firefox Mengembalikan Innerwidth: 1536; InnerHeight: 755 // Safari Returns Innerwidth: 1536; InnerHeight: 764 Document.Body.InnerHTML = 'ClientWidth:' + Document.DocumentElement.ClientWidth + '; ClientHeight:' + Document.DocumentElement.ClientHeight
Hasil: ClientWidth: 701; ClientHeight: 40
Meskipun kedua jenis atribut ini mewakili nilai yang sama pada komputer, mereka memiliki kegunaan yang berbeda di sisi seluler. innerWidth dan innerHeight mewakili visual viewport, yaitu area situs web yang dilihat pengguna; document.documentElement.clientWidth dan clientHeight mewakili tata letak viewport, merujuk pada ukuran tata letak CSS.
【2】 Penyesuaian
Gunakan dua metode resizeTo() dan resizeBy() untuk mengubah ukuran jendela browser
[Catatan] Hanya Dukungan IE dan Safari Browser
resizeTo() menerima dua parameter: lebar baru dan ketinggian baru dari jendela browser
<Div id = "myDiv"> klik di sini </div> <script> myDiv.onClick = function () {// Ubah Ulang Jendela Browser menjadi 200.200 Window.Resizeto (200.200);} </script> resizeBy() Menerima dua parameter: Perbedaan antara lebar dan tinggi jendela baru browser dan jendela asli
<Div id = "myDiv"> Klik di sini </div> <script> myDiv.onClick = function () {// Kurangi lebar jendela browser dengan 100 window.resizeBy (-100,0);} </script>Buka jendela
Metode window.open() dapat menavigasi ke URL tertentu atau membuka jendela browser baru. Metode ini menerima 4 parameter: URL yang akan dimuat, target jendela, string fitur, dan boolean yang menunjukkan apakah halaman baru menggantikan halaman yang saat ini dimuat dalam riwayat browser.
parameter
【1】 Seringkali hanya parameter pertama yang perlu dilewati, dan pembukaan default di jendela baru
<Div id = "myDiv"> klik di sini </div> <script> myDiv.onClick = function () {window.open ("http://baidu.com");} </script>【2】 Parameter kedua menunjukkan nama jendela atau kerangka yang ada, atau metode pembukaan _Self, _parent, _top, _blank, dll.
<Div id = "myDiv"> klik di sini </div> <script> // buka myDiv.onClick = function () {window.open ("http://baidu.com", '_ self');} </cript>【3】 Parameter ketiga adalah string pengaturan yang dipisahkan koma, menunjukkan fitur mana yang ditampilkan di jendela baru
<Div id = "myDiv"> Klik di sini </div> <script> myDiv.onClick = function () {// Buka halaman web QQ dengan ketinggian 500, lebar 500, koordinat vertikal 0, koordinat horizontal 200, "LIGHT = 500," http://qq. </script>[4] Parameter keempat hanya berguna jika parameter kedua bernama jendela yang ada. Ini adalah nilai boolean yang menyatakan apakah URL yang ditentukan oleh parameter pertama adalah untuk mengganti entri saat ini dalam riwayat penelusuran jendela (true) atau jika entri baru dibuat dalam riwayat penjelajahan jendela (false) yang merupakan pengaturan default
Nilai pengembalian
Nilai pengembalian metode open() adalah objek jendela jendela baru
<Div id = "myDiv"> Klik di sini </div> <script> myDiv.onClick = function () {var w = window.open (); w.document.body.innerhtml = 'Test text';} </ptript>Objek jendela yang baru dibuat memiliki properti pembuka, yang memegang objek jendela asli yang membukanya
<Div id = "myDiv"> Klik di sini </div> <script> myDiv.onClick = function () {var w = window.open (); console.log (w.opener === jendela); // true} </script>menyaring
Sebagian besar browser memiliki sistem penyaringan pop-up. Secara umum, metode open() dipanggil hanya ketika pengguna mengklik tombol atau tautan secara manual. Kode JavaScript biasanya gagal ketika mencoba membuka jendela popup ketika browser awalnya dimuat. Jika dicegat, nilai pengembalian undefined
<Div id = "myDiv"> klik di sini </div> <script> var w = window.open (); console.log (w); // undefined </cript>
Jendela ditutup
Sama seperti metode open() membuka jendela baru, metode close() menutup jendela. Jika objek jendela W telah dibuat, Anda dapat menggunakan kode berikut untuk mematikannya
<Div> <span id = "span1"> Buka window </span> <span id = "span2"> tutup jendela </span> </div> <ript> var w; span1.onclick = function () {w = window.open ();} span2.onClick = function () {if (w) {w.close (); }} </script> Objek W di jendela baru juga memiliki properti closed untuk mendeteksi apakah ditutup.
<Div id = "myDiv"> Klik di sini </div> <script> // Tampilkan False terlebih dahulu, lalu truemydiv.onClick = function () {var w = window.open (); console.log (w.closed); // false setTimeout (function () {w.close (); console.log (w.closed); // true}, 1000); } </script>Aplikasi kecil
Objek dikembalikan oleh window.open() dapat mengoperasikan pembukaan dan penutupan jendela yang baru dibuka
<Div id = "myDiv"> Buka jendela </div> <script> var w = null; myDiv.onClick = function () {// Jika W tidak ada, yaitu, tidak ada jendela baru yang dibuka, atau jendela baru ditutup jika (! W) {w = window.open ("http://baidu.com", "_blank", "tinggi = 400, lebar = 400, atas = 10, kiri = 10"); myDiv.innerHtml = 'tutup jendela'; // Jika ada W, itu berarti bahwa jendela baru dibuka} else {w.close (); w = null; myDiv.innerHtml = 'Buka jendela'; }} </script>Meringkaskan
Artikel ini terutama memperkenalkan operasi dasar Windows Browser JavaScript. Ini sangat mudah dimengerti tetapi fungsi yang sangat praktis. Saya harap ini akan membantu penggunaan JavaScript setiap hari setiap hari.