BOM 瀏覽器對象模型_window 對象的常見 window.屬性_window.方法

時間 2019-11-08

原文原文鏈接

1. 經常使用屬性javascript

window.devicePixelRatio 像素比 = css / 物理像素
window.scrollX，window.scrollY 滾動條捲曲距離

if (window.scrollY < 75) { window.scroll(0, 75); }

獲取瀏覽器組件對象css

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

全局對象屬性html

window.document 指向 document 對象。注意，這個屬性有同源限制。只有來自同源的腳本才能讀取這個屬性。
window.location 指向 Location 對象，用於獲取當前窗口的 URL 信息。它等同於 document.location 屬性
window.navigator 指向 Navigator 對象，用於獲取環境信息
window.history 指向 History 對象，表示瀏覽器的瀏覽歷史
window.localStorage 指向本地儲存的 localStorage 數據
window.sessionStorage 指向本地儲存的 sessionStorage 數據
window.console 指向 console 對象，用於操做控制檯
window.screen 指向 Screen 對象，表示屏幕信息
window.isSecureContext 屬性返回一個布爾值，表示當前窗口是否處在加密環境。

若是是 HTTPS 協議，就是 true，不然就是 falsejava

彈出不一樣的對話框瀏覽器

window.alert()

只有一個「肯定」按鈕，每每用來通知用戶某些信息session

對話框彈出期間，瀏覽器窗口處於凍結狀態，若是不點「肯定」按鈕，用戶什麼也幹不了框架

參數只能是字符串，無法使用 CSS 樣式，可是能夠用\n指定換行函數

window.prompt()

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

它每每用來獲取用戶輸入的數據
oop

window.confirm()

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

window.onunload = function () { return window.confirm('你肯定要離開當面頁面嗎？'); };

2. 經常使用方法

window.open()

新建另外一個瀏覽器窗口，相似於瀏覽器菜單的新建窗口選項。

它會返回新窗口的引用，若是沒法新建窗口，則返回 null

var popup = window.open('somefile.html');

有 3 個參數

url 字符串，表示新窗口的網址。

若是省略，默認網址就是 about:blank。

windowName 字符串，表示新窗口的名字

若是該名字的窗口已經存在，則佔用該窗口，再也不新建窗口。

若是省略，就默認使用_blank，表示新建一個沒有名字的窗口。

另外還有幾個預設值，_self表示當前窗口，_top表示頂層窗口，_parent表示上一層窗口。

windowFeatures 字符串，內容爲逗號分隔的鍵值對（詳見下文），表示新窗口的參數

好比有沒有提示欄、工具條等等。

若是省略，則默認打開一個完整 UI 的新窗口。

若是新建的是一個已經存在的窗口，則該參數不起做用，瀏覽器沿用之前窗口的參數。

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   新窗口是否顯示關閉按鈕

var popup = window.open( 'somepage.html', 'DefinitionsWindows', 'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes' );

打開的新窗口高度和寬度都爲 200 像素，沒有地址欄和滾動條，但有狀態欄，容許用戶調整大小

注意，若是新窗口和父窗口不是同源的（即不在同一個域），它們彼此不能獲取對方窗口對象的內部屬性

var w = window.open(); console.log('已經打開新窗口'); w.location = 'http://example.com';

if (popup === null) {
// 新建窗口失敗
}

window.close()

通常只用來關閉 window.open() 方法新建的窗口

對頂層窗口有效，iframe 框架之中的窗口使用該方法無效

window.stop()

徹底等同於單擊瀏覽器的中止按鈕，會中止加載圖像、視頻等正在或等待加載的對象

window.moveTo()

移動瀏覽器窗口到指定位置。

接受兩個參數，分別是窗口左上角距離屏幕左上角的水平距離和垂直距離 ，單位爲像素

```
window.moveTo(100, 200);
```
window.moveBy()

將窗口移動到一個相對位置。

它接受兩個參數，分別是相對於窗口左上角向右移動的水平距離和向下移動的垂直距離，單位爲像素

注意，僅如下狀況有效：

該窗口是用 window.open() 方法新建的，而且它所在的 Tab 頁是當前窗口裏面惟一的

window.resizeTo()

縮放窗口到指定大小

接受兩個參數：

第一個是縮放後的窗口寬度（outerWidth 屬性，包含滾動條、標題欄等等）

第二個是縮放後的窗口高度（outerHeight 屬性）

將當前窗口縮放到，屏幕可用區域的一半寬度和高度

window.resizeTo( window.screen.availWidth / 2, window.screen.availHeight / 2 );

window.resizeBy()

用於 按照相對自己的量縮放窗口

接受兩個參數，第一個是水平縮放的量，第二個是垂直縮放的量，單位都是像素

```
window.resizeBy(-200, -200);
```
將當前窗口的寬度和高度，都縮小 200 像素
window.scrollTo() / window.scroll()

將文檔滾動到指定位置。

接受兩個參數，也能夠接受一個配置對象做爲參數，表示滾動後 相對於窗口左上角的頁面座標。

window.scrollTo({ top: 1000, behavior: 'smooth' });

top 滾動後頁面左上角的垂直座標，即 y 座標。
left 滾動後頁面左上角的水平座標，即 x 座標。
behavior 字符串，表示滾動的方式，有三個可能值（smooth、instant、auto），默認值爲 auto。

window.scrollBy()

將網頁相對當前位置滾動指定距離（單位像素）。

接受兩個參數：水平向右滾動的像素，垂直向下滾動的像素

將網頁向下滾動一屏
```
window.scrollBy(0, window.innerHeight);
```

注意：

若是不是滾動網頁，而是滾動某個元素

Element.scrollTop
Element.scrollLeft
Element.scrollIntoView()
window.print()

會跳出打印對話框，與用戶點擊菜單裏面的「打印」命令效果相同

document.getElementById('printLink').onclick = function () { if (typeof window.print === 'function') { // 支持打印功能
 window.print(); }; };

window.focus()

激活窗口，使其得到焦點，出如今其餘窗口的前面

先檢查popup窗口是否依然存在，確認後激活該窗口

var popup = window.open('popup.html', 'Popup Window'); if ((popup !== null) && !popup.closed) { popup.focus(); };

window.blur()

將焦點從窗口移除

當前窗口得到焦點時，會觸發focus事件；

當前窗口失去焦點時，會觸發blur事件

window.getSelection()

返回一個 Selection 對象，表示用戶如今選中的文本

var selObj = window.getSelection();
var theSel = selObj.toString();

window.getComputedStyle()

接受一個元素節點做爲參數，返回一個包含該元素的最終樣式信息的對象

window.matchMedia()

檢查 CSS 的 mediaQuery 語句

window.requestAnimationFrame()

跟 setTimeout() 相似，都是推遲某個函數的執行。

不一樣之處在於：

setTimeout()

必須指定推遲的時間，

window.requestAnimationFrame()

則是推遲到瀏覽器下一次重流時執行，該函數執行完纔會進行下一次重繪。

重繪一般是 16ms 執行一次，不過瀏覽器會自動調節這個速率，

好比網頁切換到後臺 Tab 頁時，requestAnimationFrame() 會暫停執行。

若是某個函數會改變網頁的佈局，通常就放在 window.requestAnimationFrame() 裏面執行

這樣能夠節省系統資源，使得網頁效果更加平滑。

由於慢速設備會用較慢的速率重流和重繪，而速度更快的設備會有更快的速率

接受一個回調函數做爲參數

```
window.requestAnimationFrame(callback);
```
callback是一個回調函數。
callback 執行時，它的參數就是

系統傳入的一個高精度時間戳（performance.now() 的返回值），單位是毫秒，表示距離網頁加載的時間。

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

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

實例

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>requestAnimationFrame</title>
        
        <link rel="stylesheet" type="text/css" href="./css/index.css" />
    </head>
    
    <body>
        
        <div id="test_box" class="clearfix">
            
        </div>
        
        <!-- javascript 代碼 -->
        <script type="text/javascript" src="./js/index.js"></script>
    </body>
</html>

index.css

body { width: 100%; color: #000; background: #96b377; font: 14px Helvetica, Arial, sans-serif; } #test_box { width: 100px; height: 100px; background-color: red; }

index.js

window.addEventListener("DOMContentLoaded", function(){ var testBox = document.getElementById("test_box"); /**** requestAnimationFrame ****/
    var element = testBox; element.style.position = 'absolute'; var start = null; var offset = 0; var speed = 5; function step(timestamp) { if (!start){ start = timestamp; }; var progress = (timestamp - start)/speed;
        endPos = 500; // 元素不斷向左移，最大不超過200像素
        offset = progress; if(parseInt(progress/endPos)%2 == 0){
            offset = progress%endPos; }else{ offset = endPos - progress%endPos; }; element.style.left = offset%endPos + 'px'; // 若是距離第一次執行不超過 2000 毫秒，
        // 就繼續執行動畫
        //if (progress < 2000) {
 window.requestAnimationFrame(step); //};
 }; window.requestAnimationFrame(step); }, false);