## BOM 之window 對象

時間 2019-11-18

標籤 bom window 對象欄目 Windows 简体版

原文原文鏈接

目錄javascript

BOM 之window 對象

BOM 之window 對象

`window` 概念

window對象，表示的是瀏覽器的一個實例，window對象有兩重意義，一是做爲javascript訪問瀏覽器的一個接口，二是做爲ECMAScript規定的全局對象。html

全局做用域

在全局做用域下定義的變量和函數都會變成window對象的屬性和方法。java

var age = 18;
console.log(window.age);  //18

var foo = function() {
    return 'foo'
};

console.log(window.foo === foo);  // true

全局變量與windowd對象的屬性存在兩點差異：web

全局變量不能夠使用delete刪除，而直接在window上定義的屬性能夠刪除。

var age = 18;
 window.color = 'red';

 delete window.color // true
 delete window.age //false

訪問未定義變量會報錯，訪問window未定義屬性返回undefined

obj; // Uncaught ReferenceError: obj is not defined
window.obj //underfined

窗口信息

窗口位置

screenTop：窗口相對於上邊的位置
screenLeft:窗口相對於左邊的位置
在FireFox 中，screenX和screenY屬性提供與上述相同的窗口位置信息。瀏覽器

跨瀏覽器取得窗口左邊和上邊的位置（非精確值）

var left = typeof (window.screenLeft === "number")
  ? window.screenLeft
  : window.screenX;
var top = typeof (window.screenTop === "number")
  ? window.screenTop
  : window.screenY;

移動窗口位置的方法(可能被禁用)

moveTo(x,y)：移動窗口到固定位置，x、y分別表示新位置的座標
moveBy(x,y)：將當前窗口移動到相對如今水平和垂直方向上的距離框架

窗口大小

屬性

outerWidth 和outerHeight：瀏覽器窗口自己的寬、高。
innerWidth和innerHeight：頁面視圖區對應寬、高。

在IE9 如下，不支持以上屬性，不過能夠經過DOM提供頁面可見區域的相關信息。
document.documentElement.clientWidth 和 document.documentElement.clientHeight提供頁面視口信息，不包括外邊距，邊框和垂直滾動條的距離。在IE6中，只有頁面在標準模式下，才支持這些屬性。在混雜模式下，必須經過documtent.body.clientWidth和documtent.body.clientHeight才能取得相同信息。函數

跨瀏覽器取得頁面視口大小(非精確值)

if (typeof pageWidth === "number") {
  // 判斷頁面是否處於標準模式
  if (document.compatMode === "CSS1Compat") {
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
  } else {
    pageWidth = document.body.clientWidth;
    pageHeight = document.body.clientHeight;
  }
}

調整窗口大小的方法（可能被禁用）

resizeTo：接收瀏覽器窗口新的寬度及高度
resizeBy：接收新窗口與原窗口的寬度和高度之差url

窗口方法及相關屬性
window.open()導航到一個既定的url，並返回一個指向新窗口的引用
window.close() 關閉新打開的窗口，僅適用於經過window.open打開的彈出窗口
opener：是window對象的一個屬性，若是該窗口是使用window.open()方法打開的，則指向打開它的原始對象，不然爲nullcode

setTimeout和 setInterval
setTimeout 即超時調用，在指定的時間事後執行代碼，接收兩個參數：要執行的代碼和以毫秒錶示的時間
clearTimeout：取消超時調用

var timer = setTimeout(function() {
  console.log("settimeout");
}, 1000);

clearTimeout(timer);

setInterval：間歇性調用，傳入參數同setTimeout，返回一個ID，可用於在未來某個時刻取消間歇調用
clearInterval：取消間歇調用htm

var timer = setInterval(function() {
  console.log("setInterval");
}, 1000);

clearInterval(timer);

系統對話框

alert()：接收一個字符串並顯示一個對話框給用戶
confirm()：接收一個字符串，顯示一個確認對話框，並返回用戶單擊肯定按鈕的布爾值
prompt()：顯示「提示框」，接收兩個參數，要顯示給用戶的文本和輸入框默認值，該方法返回用戶輸入的值
print()：顯示打印對話框
find()：傳入一個字符串，返回在該頁面查找結果的布爾值

窗口關係及框架(frame 在web標準中已經被廢除)

框架層級關係

top對象始終指向最外層框架，也就是window。
parent指向當前框架的直接上層框架。
self指向window，二者能夠互換使用

訪問框架對象

每一個框架都擁有本身的window對象，並保存在frames集合中。在frames集合中，能夠經過數值索引(從0開始，從左到右，從上到下)或者框架名稱 來訪問相應的window對象

<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body>
  <frameset>
    <frame src="frame.html" name='topFrame'>
      <frameset cols="50% 50%">
        <frame src="left.html" name='leftFrame'>
        <frame src="right.html" name='rightFrame'>
      </frameset>
  </frameset>
</body>

</html>

以上代碼中建立了3個框架，若要訪問名爲topFrame的框架，能夠經過如下方式：