JavaScript 複習之 window對象

瀏覽器裏面，window對象指當前瀏覽器窗口。他是當前頁面的頂層對象。

1、window 對象的屬性

• window.name表示當前瀏覽器窗口的名字。
• window.closed返回一個布爾值，表示窗口是否關閉
• window.opener屬性表示打開當前窗口的父窗口，若是沒有，返回null
• window.self和window.window屬性都指向窗口自己。
• window.frames返回一個類數組對象，成員爲頁面內全部框架窗口，包括frame元素和iframe元素。window.frames[0]表示頁面中的第一個框架窗口。
• window.frameElement主要用於當前窗口嵌在另外一個網頁的狀況，返回當前窗口所在的那個元素節點。
• window.top指向最頂層窗口，主要用於框架窗口裏面獲取頂層窗口
• window.parent指向父窗口。若是沒有父窗口，指向自身。

位置大小屬性

• window.screenX，window.screenY返回瀏覽器窗口左上角相對於當前屏幕左上角的水平距離和垂直距離（單位像素），屬性只讀
• window.innerHeight，window.innerWidth返回網頁在當前窗口中可見部分的高度和寬度（單位像素）。
• window.outerHeight，window.outerWidth屬性返回瀏覽器窗口的高度和寬度，包括瀏覽器菜單和邊框（單位像素）
• window.scrollX，window.scrollY返回頁面的水平滾動距離和垂直滾動距離
• window.pageXOffset，window.pageYOffset分別是上面兩個屬性的別名

組件屬性

• window.locationbat地址欄對象
• window.menubar菜單欄對象
• window.scrollbars窗口的滾動條對象
• window.toolbar工具欄對象
• window.statusbar狀態欄對象
• window.personalbar用戶安裝的我的工具欄對象

這些對象的visible屬性是一個布爾值，表示這些組件是否可見。這些屬性只讀。

window 對象的方法

• window.alert()彈出對話框，只有要給肯定按鈕，每每用來通知用戶某些信息。

• window.prompt()彈出對話框，提示文字的下方，有一個輸入框，要求用戶輸入信息，並有「肯定」和「取消」兩個按鈕。

var result = prompt('您的年齡？', 25)
//方法的第二個參數是可選的，可是最好老是提供第二個參數，做爲輸入框的默認值。
複製代碼

• window.confirm()彈出的對話框，除了提示信息以外，只有「肯定」和「取消」兩個按鈕，每每用來徵詢用戶是否贊成。

var okay = confirm('Please confirm this message.');
if (okay) {
  // 用戶按下「肯定」
} else {
  // 用戶按下「取消」
}
複製代碼

• window.open()用於新建另外一個瀏覽器窗口。

方法接受三個參數

window.open(url,windowName,[windowFeatures])
複製代碼

windowFeatures：字符串，內容爲逗號分隔的鍵值對（詳見下文），表示新窗口的參數，好比有沒有提示欄、工具條等等。 第三個參數能夠設定以下屬性。

• 參數以下：

  • left：新窗口距離屏幕最左邊的距離（單位像素）。注意，新窗口必須是可見的，不能設置在屏幕之外的位置。
  • top：新窗口距離屏幕最頂部的距離（單位像素）。
  • height：新窗口內容區域的高度（單位像素），不得小於100。
    • width：新窗口內容區域的寬度（單位像素），不得小於100。
  • outerHeight：整個瀏覽器窗口的高度（單位像素），不得小於100。
  • outerWidth：整個瀏覽器窗口的寬度（單位像素），不得小於100。
  • menubar：是否顯示菜單欄。
  • toolbar：是否顯示工具欄。
  • location：是否顯示地址欄。
  • personalbar：是否顯示用戶本身安裝的工具欄。
  • status：是否顯示狀態欄。
  • dependent：是否依賴父窗口。若是依賴，那麼父窗口最小化，該窗口也最小化；父窗口關閉，該窗口也關閉。
  • minimizable：是否有最小化按鈕，前提是dialog=yes。
  • noopener：新窗口將與父窗口切斷聯繫，即新窗口的window.opener屬性返回null，父窗口的window.open()方法也返回null。
  • resizable：新窗口是否能夠調節大小。
  • scrollbars：是否容許新窗口出現滾動條。
  • dialog：新窗口標題欄是否出現最大化、最小化、恢復原始大小的控件。
  • titlebar：新窗口是否顯示標題欄。
  • alwaysRaised：是否顯示在全部窗口的頂部。
  • alwaysLowered：是否顯示在父窗口的底下。
  • close：新窗口是否顯示關閉按鈕。

• window.close方法用於關閉當前窗口，通常只用來關閉window.open方法新建的窗口。

• window.stop()方法徹底等同於單擊瀏覽器的中止按鈕，會中止加載圖像、視頻等正在或等待加載的對象。

• window.moveTo()方法用於移動瀏覽器窗口到指定位置。它接受兩個參數，分別是窗口左上角距離屏幕左上角的水平距離和垂直距離，單位爲像素。

• window.moveBy()方法將窗口移動到一個相對位置。它接受兩個參數，分佈是窗口左上角向右移動的水平距離和向下移動的垂直距離，單位爲像素。

• window.resizeTo()方法用於縮放窗口到指定大小。接受兩個參數，第一個是縮放後窗口的寬度（outWidth屬性），第二個是縮放後窗口高度（outHeight屬性）

window.resizeTo(
  window.screen.availWidth / 2,
  window.screen.availHeight / 2
)
//上面代碼將當前窗口縮放到，屏幕可用區域的一半寬度和高度。
複製代碼

• window.resizeBy()方法用於縮放窗口。它與window.resizeTo()的區別是，它按照相對的量縮放，window.resizeTo()須要給出縮放後的絕對大小。它接受兩個參數，第一個是水平縮放的量，第二個是垂直縮放的量，單位都是像素。

window.resizeBy(-200, -200)
//上面的代碼將當前窗口的寬度和高度，都縮小200像素。
複製代碼

• window.scrollTo()方法用於將文檔滾動到指定位置。接受兩個參數，表示滾動後位於窗口左上角的頁面座標。也可接受一個配置對象做爲參數。

window.scrollTo(options)

window.scrollTo({
  top: 1000,
  behavior: 'smooth'
});
複製代碼

options有三個屬性。

• top：滾動後頁面左上角的垂直座標，即 y 座標。

• left：滾動後頁面左上角的水平座標，即 x 座標。

• behavior：字符串，表示滾動的方式，有三個可能值（smooth、instant、auto），默認值爲auto。

• window.scrollBy()方法用於將網頁滾動指定距離（單位像素）。它接受兩個參數：水平向右滾動的像素，垂直向下滾動的像素。

• window.print()調用打印

• window.focus()方法會激活窗口，使其得到焦點，出如今其餘窗口的前面。

• window.blur()方法將焦點從窗口移除。

window.requestAnimationFrame()

方法跟setTimeout相似，都是推遲某個函數的執行，不一樣之處，是setTimeout必須指定推遲的時間，window.requestAnimationFrame()則是推遲到瀏覽器下次重流時執行，執行完纔會進行下次重繪。

若是某個函數改變了網頁佈局，通常放在window.requestAnimationFrame()裏面執行，這樣能夠節省系統資源，是網頁效果更加平滑。

該方法接受一個回調函數做爲參數

window.requestAnimationFrame(callback)
複製代碼

上面callback回調函數執行時，他的參數時系統傳入的高精度時間戳，單位是毫秒，表示網頁加載的時間。

window.requestAnimationFrame()返回值是一個整數，這個整數能夠傳入window.cancelAnimationFrame()，用來取消回調函數的執行。

let el = document.getElementById('animation');
el.style,position = 'absolute';

let start = null;
function step(timestamp){
    if(!start) start = timestamp;
    // 元素不斷向左移，最大不超過200像素
    let progress = timestamp - start;
    el.style.left = Math.min(progress/10, 200) + 'px';
    // 若是距離第一次執行不超過 2000 毫秒，
  // 就繼續執行動畫
    if(progress < 2000){
        window,requestAnimationFrame(step);
    }
}
window,requestAnimationFrame(step);
複製代碼

window.requestIdleCallback()

window.requestIdleCallback()跟setTimeout相似，也是將某個函數推遲執行，可是它保證將回調函數推遲到系統資源空閒時執行。也就是說，若是某個任務不是很關鍵，就可使用window.requestIdleCallback()將其推遲執行，以保證網頁性能。

它跟window.requestAnimationFrame()的區別在於，後者指定回調函數在下一次瀏覽器重排時執行，問題在於下一次重排時，系統資源未必空閒，不必定能保證在16毫秒以內完成；window.requestIdleCallback()能夠保證回調函數在系統資源空閒時執行。

該方法接受一個回調函數和一個配置對象做爲參數。配置對象能夠指定一個推遲執行的最長時間，若是過了這個時間，回調函數無論系統資源有無空虛，都會執行。

window.requestIdleCallback(callback[, options])
複製代碼

callback參數是一個回調函數。該回調函數執行時，系統會傳入一個IdleDeadline對象做爲參數。IdleDeadline對象有一個didTimeout屬性（布爾值，表示是否爲超時調用）和一個timeRemaining()方法（返回該空閒時段剩餘的毫秒數）。

options參數是一個配置對象，目前只有timeout一個屬性，用來指定回調函數推遲執行的最大毫秒數。該參數可選。

window.requestIdleCallback()方法返回一個整數。該整數能夠傳入window.cancelIdleCallback()取消回調函數。

requestIdleCallback(myNonEssentialWork);

function myNonEssentialWork(deadline) {
  while (deadline.timeRemaining() > 0) {
    doWorkIfNeeded();
  }
}
複製代碼

requestIdleCallback(processPendingAnalyticsEvents, { timeout: 2000 });
複製代碼

上面代碼指定，processPendingAnalyticsEvents必須在將來2秒以內執行。

若是因爲超時致使回調函數執行，則deadline.timeRemaining()返回0，deadline.didTimeout返回true。

若是屢次執行window.requestIdleCallback()，指定多個回調函數，那麼這些回調函數將排成一個隊列，按照先進先出的順序執行。