學習筆記——瀏覽器物件模型（Window）

Null指標發表於2018-10-17
筆記瀏覽器物件模型

Window 物件

所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。

所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。

全域性變數是 window 物件的屬性。

全域性函式是 window 物件的方法。

甚至 HTML DOM 的 document 也是 window 物件的屬性之一：

window.document.getElementById("header");

等同於

document.getElementById("header");

Window 尺寸

有三種方法能夠確定瀏覽器視窗的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。

對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 瀏覽器視窗的內部高度

window.innerWidth - 瀏覽器視窗的內部寬度

對於 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

實用的 JavaScript 方案（涵蓋所有瀏覽器）：

例項：

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <p id="demo"></p>
 6 
 7 <script>
 8 var w=window.innerWidth
 9 || document.documentElement.clientWidth
10 || document.body.clientWidth;
11 
12 var h=window.innerHeight
13 || document.documentElement.clientHeight
14 || document.body.clientHeight;
15 
16 x=document.getElementById("demo");
17 x.innerHTML="瀏覽器的內部視窗寬度：" + w + "，高度：" + h + "。"
18 </script>
19 
20 </body>
21 </html>
複製程式碼

結果：

瀏覽器的內部視窗寬度：705，高度：400。
複製程式碼

其他 Window 方法

一些其他方法：

window.open() - 開啟新視窗

window.close() - 關閉當前視窗

window.moveTo() - 移動當前視窗

window.resizeTo() - 調整當前視窗的尺寸

jQuery.isWindow()方法：判斷傳入的引數是否為 window物件

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鳥教程(runoob.com)</title>    
 6 <script src="../jquery/1.10.2/jquery.min.js"></script>
 7 </head>
 8 <body>
 9 
10 window 是一個視窗嗎? <b></b>
11 <script>
12 $(function () { 
13     $("b").append( "" + $.isWindow(window) );
14 })
15 </script>
16  
17 </body>
18 </html>
複製程式碼
結果：

window 是一個視窗嗎? true

語法：

$.isWindow( object )

object：任意型別，需要進行判斷的任意值。

摘自：菜鳥教程（www.runoob.com/js/js-windo…）

相關文章