JavaScript 複習之 window物件

DreamTruth發表於2019-03-04
JavaScript物件

瀏覽器裡面，window物件指當前瀏覽器視窗。他是當前頁面的頂層物件。

一、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()，指定多個回撥函式，那麼這些回撥函式將排成一個佇列，按照先進先出的順序執行。

相關文章