Tetingkap JavaScript - Model Objek Pelayar

Tetingkap JavaScript - Model Objek Pelayar

Model Objek Pelayar (BOM) memberikan JavaScript keupayaan untuk "bercakap" dengan penyemak imbas.

Model Objek Penyemak Imbas (BOM)

Tiada standard formal untuk Model Objek Pelayar (BOM).

Kaedah dan sifat sering dianggap sebagai BOM kerana penyemak imbas moden telah melaksanakan (hampir) kaedah dan sifat yang sama untuk interaktiviti JavaScript.

Objek Tetingkap

Semua penyemak imbas menyokong objek tetingkap. Ia mewakili tetingkap penyemak imbas.

Semua objek, fungsi dan pembolehubah global JavaScript secara automatik menjadi ahli objek tetingkap.

Pembolehubah global ialah sifat objek tetingkap.

Fungsi global ialah kaedah objek tetingkap.

Malah dokumen HTML DOM ialah salah satu sifat objek tetingkap:

window.document.getElementById("header");

Sama seperti ini:

document.getElementById("header");

Saiz Tetingkap

Terdapat tiga kaedah untuk menentukan saiz tetingkap penyemak imbas (port pandang penyemak imbas, tidak termasuk bar alat dan bar skrol ).

Untuk Internet Explorer, Chrome, Firefox, Opera dan Safari:

window.innerHeight - Ketinggian dalaman tetingkap penyemak imbas.innerWidth - Lebar dalaman tetingkap penyemak imbas

Untuk Internet Explorer 8, 7, 6, 5:

document.documentElement.clientHeightdocument.documentElement.clientWidth

atau

document.body.clientHeightdocument.body.

Kaedah Tetingkap Lain

Beberapa kaedah lain:

window.open() - Buka tetingkap baharu.tutup () - Tutup tetingkap tetingkap semasa.moveTo() - Alihkan tetingkap semasa.resizeTo() - Laraskan saiz tetingkap semasa


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo"></p> <script> var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; x=document.getElementById("demo"); x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。" </script> </body> </html>