原生JavaScript學習之 window對象（ES5標準）

1 window對象的定義？

window 對象表示一個包含DOM文檔的窗口，其 document 屬性指向窗口中載入的 DOM文檔 。使用document.defaultView 屬性能夠獲取指定文檔所在窗口。（來自 MDN）

全部瀏覽器都支持 window 對象，它表示瀏覽器窗口。全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。全局變量是 window 對象的屬性。全局函數是 window 對象的方法。（來自 W3School）

簡單地理解成，window就是指當前的瀏覽器窗口。JavaScript的全部對象都存在於一個運行環境之中，這個運行環境自己也是對象，稱爲「頂層對象」。這就是說，JavaScript的全部對象，都是「頂層對象」的下屬。不一樣的運行環境有不一樣的「頂層對象」，在瀏覽器環境中，這個頂層對象就是window對象。全部瀏覽器環境的全局變量，都是window對象的屬性。

2 window對象的屬性

      2.1 window的尺寸和位置             

              1. window.document

                     語法： doc = window.document。

                     doc是一個指向document對象的引用。

              2.  window.fullScreen

                       語法： isInFullScreen = windowRef.fullScreen。

                       isInFullScree是 一個布爾值，true:  窗口處於全屏模式下，false:  窗口未處於全屏模式下。

                 注： 在常規窗口與全屏窗口之間切換會在相應的窗口中觸發「resize」事件。

              3. window.screenX，window.screenY

                      window.screenX和window.screenY屬性，返回瀏覽器窗口左上角相對於當前屏幕左上角（(0, 0)）的水平距離和垂直距離，單位爲像素。

              4. window.innerHeight，window.innerWidth

                     window.innerHeight 和 window.innerWidth 屬性，適用於 Internet Explorer、Chrome、Firefox、Opera 以及 Safari，返回網頁在當前窗口中可見部分的高度和寬度，即「視口」（viewport），單位爲像素。瀏覽器的視口，不包括工具欄和滾動條。

                    對於 Internet Explorer 八、七、六、5：document.documentElement.clientHeight、document.documentElement.clientWidth 或者 document.body.clientHeight、document.body.clientWidth。

             5. window.outerHeight，window.outerWidth

                     window.outerHeight 和 window.outerWidth 屬性返回瀏覽器窗口的高度和寬度，包括瀏覽器菜單和邊框，單位爲像素。

             6. window.scrollX，window.scrollY

                    window.scrollX 返回文檔/頁面水平方向滾動的像素值，window.scrollY 返回文檔/頁面垂直方向滾動的像素值。

2.2 window對象的經常使用屬性

           1. window.name

                    window.name屬性用於獲取或設置當前瀏覽器窗口的名字。

                    語法：  string = window.name;
                                 window.name = string;

           2. window.closed

                    window.closed 返回一個布爾值，是一個只讀屬性，表示窗口是否被關閉。

                    語法： isClosed = windowRef.closed;

                    isClosed ： 布爾值

                                        true：窗口已經被關閉；

                                        false: 窗口開啓着；

//檢查當前窗口的父窗口存在而且沒有關閉
if (window.opener && !window.opener.closed) {
  window.opener.location.href = "http://www.mozilla.org";
}

           3.  window.opener

                  window.opener 屬性返回一個引用打開窗口的父窗口，從另外一個窗口打開窗口時(使用Window.open),它維護一個參考window.opener做爲第一個窗口。若是當前窗口沒有父窗口,該方法返回NULL。

                  語法：objRef = window.opener;

if (window.opener != indexWin) {
  referToTop(window.opener);
}


var windowOp = window.opener;

               經過opener屬性，能夠得到父窗口的的全局變量和方法，好比windowOp.window.propertyName和windowOp.window.functionName()。 該屬性只適用於兩個窗口屬於同源的狀況，且其中一個窗口由另外一個打開。

         4.  window.location

            window.location 屬性返回一個只讀的位置對象與文檔當前的位置信息，用於獲取窗口當前的URL信息，等同於document.location。

            語法：  var oldLocation = location;
                         location = newLocation;

//導航到一個新頁面
location.assign("http://www.mozilla.org"); // or
location = "http://www.mozilla.org";

//強制刷新當前頁面
location.reload(true);

//重載頁面使用replace()方法插入中間的值
function reloadPageWithHash() {
  var initialPage = location.pathname;
  location.replace('http://example.com/#' + initialPage);
}

//顯示當前URL屬性的一個警告對話框
function showLoc() {
  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
  for (var sProp in oLocation){
    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
  }
  alert(aLog.join("\n"));
}

 

           5.  window.history

                    window.history 屬性是隻讀的，返回一個引用對象，它提供了一個接口,用於操縱瀏覽器會話歷史(頁面訪問當前頁面的選項卡或框架加載)。

                    語法： var historyObj = window.history;

history.back();/ /至關於單擊後退按鈕
history.go(1);/ /至關於history.back();

                  在頂級頁面，你能夠看到會話歷史上的列表頁面,經過歷史對象,在瀏覽器旁邊的後退和前進按鈕。出於安全緣由，歷史對象不容許非特權的代碼來訪問會話歷史上其餘頁面的url,但它確實使它導航會話歷史。沒有辦法清除會話歷史或禁用後退/前進導航從無特權的代碼。解決方案是可用的最友好的location.replace()方法,取代當前項的會話歷史提供的URL。  

2.3  框架窗口 （window.frames） 

           window.frames 屬性返回窗口自己， 這是一個數組類對象，成員爲全部框架的窗口，包括frames元素和iframe元素。

           語法：frameList = window.frames;

            window.frames[0]表示頁面中第一個框架窗口，window.frames['someName']則是根據框架窗口的name屬性的值（不是id屬性），返回該窗口。另外，經過document.getElementById()方法也能夠引用指定的框架窗口。

window.frames[0] === getElementsByTagName(「iframe」)[0].contentWindow);

//window.length屬性返回當前頁面中全部框架窗口總數
window.frames.length === window.length // true

            注： window.frames的每一個成員對應的是框架內的窗口（即框架的window對象）。若是要獲取每一個框架內部的DOM樹，須要使用window.frames[0].document的寫法。

if (window.parent != window.self) {
  // 當前窗口是子窗口
}

    iframe元素遵照同源政策，只有當父頁面與框架頁面來自同一個域名，二者之間才能夠用腳本通訊，不然只有使用window.postMessage方法。iframe窗口內部，使用window.parent引用父窗口。若是當前頁面沒有父窗口，則window.parent屬性返回自身。所以，能夠經過window.parent是否等於window.self，判斷當前窗口是否爲iframe窗口。

2.4 navigator對象 （window.navigator）

        window.navagator 屬性是隻讀的，返回一個navigator對象，能夠查詢信息應用程序運行腳本。

        語法：  navigatorObject = window.navigator；

        1 navigator.userAgent屬性

               navigator.userAgent屬性返回瀏覽器的User-Agent字符串，用來標示瀏覽器的種類。下面是Chrome瀏覽器的User-Agent。

var sBrowser, sUsrAg = navigator.userAgent;

if(sUsrAg.indexOf("Chrome") > -1) {
    sBrowser = "Google Chrome";
} else if (sUsrAg.indexOf("Safari") > -1) {
    sBrowser = "Apple Safari";
} else if (sUsrAg.indexOf("Opera") > -1) {
    sBrowser = "Opera";
} else if (sUsrAg.indexOf("Firefox") > -1) {
    sBrowser = "Mozilla Firefox";
} else if (sUsrAg.indexOf("MSIE") > -1) {
    sBrowser = "Microsoft Internet Explorer";
}

console.log("You are using: " + sBrowser);

           運行效果以下：

            

            經過userAgent屬性識別瀏覽器，不是一個好辦法。由於必須考慮全部的狀況（不一樣的瀏覽器，不一樣的版本），很是麻煩，並且沒法保證將來的適用性，更況且各類上網設備層出不窮，難以窮盡。因此，如今通常再也不識別瀏覽器了，而是使用「功能識別」方法，即逐一測試當前瀏覽器是否支持要用到的JavaScript功能。

        不過，經過userAgent能夠大體準確地識別手機瀏覽器，方法就是測試是否包含「mobi」字符串。

        

            若是想要識別全部移動設備的瀏覽器，能夠測試更多的特徵字符串。

/mobi|android|touch|mini/i.test(ua)

 

        2 navigator.plugins屬性

               navigator.plugins屬性返回一個相似數組的對象，成員是瀏覽器安裝的插件，好比Flash、ActiveX等。

2.5 顯示設備信息（window.screen）

            window.screen 屬性返回一個屏幕與窗口相關的引用，包含了顯示設備的信息。

            語法： screenObj = window.screen;

            

           screenObj.height 和 screenObj.width兩個屬性，通常用來了解設備的分辨率。除非調整顯示器的分辨率，不然這兩個值能夠看做常量，不會發生變化。顯示器的分辨率與瀏覽器設置無關，縮放網頁並不會改變分辨率。

            

            screenObj.availHeight 和 screenObj.availWidth屬性返回屏幕可用的高度和寬度，單位爲像素。它們的值爲屏幕的實際大小減去操做系統某些功能佔據的空間，好比系統的任務欄。

            screenObj.colorDepth屬性返回屏幕的顏色深度，通常爲16（表示16-bit）或24（表示24-bit）。

3 window對象的方法

       3.1 window.close()、window.open()方法

                    window.open方法用於新建另外一個瀏覽器窗口，而且返回該窗口對象。

                    語法： var windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);

                                windowObjectReference：新建立的窗口的引用。若是調用失敗,這將是null。引用可用於訪問新窗口提供了它的屬性和方法符合同源policysecurity需求。

                                strUrl：新加載窗口的URL，strUrl能夠成爲在web上被瀏覽器支持的HTML文檔、圖像文件或任何資源。

                                strWindowName：一個新窗口的字符串名字。這個名字能夠做爲連接和表單使用的目標的目標屬性  or 元素，不該該包含任何空格字符的名稱，strWindowName並不指定新窗口的標題。

                                strWindowFeatures：一個新窗口可選參數清單的功能(大小、位置、滾動條等)的字符串。字符串必須不包含任何空格,每一個特性名稱及其值必須由一個逗號分開。

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

//example2
var windowObjectReference;
var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";

function openRequestedPopup() {
  windowObjectReference = window.open("https://www.baidu.com/", "baidu_WindowName", strWindowFeatures);
};

openRequestedPopup();


//example3

var windowObjectReference;

function openRequestedPopup() {
  windowObjectReference = window.open(
    "https://image.baidu.com/",
    "DescriptiveWindowName",
    "resizable,scrollbars,status"
  )
};

openRequestedPopup();

效果以下：

 

                       

                open方法的第一個參數是新窗口打開的網址，此外還能夠加上第二個參數，表示新窗口的名字，以及第三個參數用來指定新窗口的參數，形式是一個逗號分隔的property=value字符串。 注意，若是在第三個參數中設置了一部分參數，其餘沒有被設置的yes/no參數都會被設成No，只有titlebar和關閉按鈕除外（它們的值默認爲yes）。open方法返回新窗口的引用。

 

                    

                      因爲open這個方法很容易被濫用，許多瀏覽器默認都不容許腳本新建窗口。所以，有必要檢查一下打開新窗口是否成功。

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

                      語法：window.close(); 

if ((popup !== null) && !popup.closed) {
  // 窗口仍然打開着
}

                        window.closed屬性用於檢查當前窗口是否被關閉。

       3.2   window.moveTo()，window.moveBy()方法

                        window.moveTo方法用於移動窗口到指定位置。

                        語法：window.moveTo(x, y) ;

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

function origin() {
  // moves to top left corner of screen
  window.moveTo(0, 0);
}; 
origin();

   效果以下：

 

 上面代碼將窗口移動到屏幕(0,0)的位置。

                    window.moveBy方法將窗口移動到一個相對位置。

                    語法：window.moveBy(deltaX, deltaY);

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

function budge() {
  moveBy(30, 30);
};

budge();

效果以下：

上面代碼將窗口向右移動25像素、向下移動50像素。

            3.3   window.resizeTo()，window.resizeBy()方法

                                window.resizeTo()方法將動態調整窗口。

                                語法：window.resizeTo(aWidth, aHeight);

                                它接受兩個參數，aWidth、aHeight分別是窗口outerWidth 和 outerHeight的整數(包括滾動條、標題欄等)，單位爲像素。

function quarter() {
  window.resizeTo(
    window.screen.availWidth / 2,
    window.screen.availHeight / 2
  );
};

quarter();

                                         window.resizeBy()方法將動態調整窗口。

                                          語法：window.resizeBy(xDelta, yDelta) 

                                          它接受兩個參數，xDelta、yDelta分別是窗口水平增加、垂直增加的數量，單位爲像素。

window.resizeBy(-300, -300);

 

                   3.4   window.print()方法

                                        window.print() 方法會跳出打印對話框，同用戶點擊菜單裏面的「打印」命令效果相同。

                                         語法：window.print()；

//頁面上的打印按鈕代碼以下

document.getElementById('printLink').onclick = function() {
  window.print();
}

//非桌面設備（好比手機）可能沒有打印功能，須要判斷

if (typeof window.print === 'function') {
  // 支持打印功能
}

 

                3.5 window.focus()、window.blur()方法

                                   window.focus()方法會激活指定當前窗口，使其得到焦點。

                                    語法：window.focus()； 

//先檢查popup窗口是否依然存在，確認後激活該窗口
if ((popup !== null) && !popup.closed) {
  popup.focus();
}

                                    當前窗口得到焦點時，會觸發focus事件；當前窗口失去焦點時，會觸發blur事件。
                                    window.blur()方法會激活指定當前窗口，使其得到焦點。

                                    語法：window.blur()；

                3.6 window.matchMedia()方法

                                    window.matchMedia()方法返回一個新的MediaQueryList對象表明指定的媒體屬性的解析結果。

                                    語法：mql = window.matchMedia(mediaQueryString)；

                                               mediaQueryString是一個表明媒體查詢返回一個newMediaQueryList對象的字符串。

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

 

               3.7 window.getComputedStyle()方法

                                    window.getComputedStyle()方法給出了全部元素的CSS屬性的值在應用活動樣式表和包含可能解決任何基本計算的值。

                                    語法：var style = window.getComputedStyle(element[, pseudoElt]);

                                               pseudoElt 可選 一個字符串指定僞元素匹配。必須爲常規元素(或者爲空)。

<style>
 h3::after {
   content: ' rocks!';
 }
</style>

<h3>generated content</h3> 

<script>
  var h3       = document.querySelector('h3'), 
      result   = getComputedStyle(h3, ':after').content;

  console.log('the generated content is: ', result); // returns ' rocks!'
</script>

 

           3.8 window.postMessage()方法

                       window.postMessage方法可以安全地跨起源溝通。一般狀況下，在不一樣的頁面中的腳本能夠訪問對方，當且僅當執行他們的網頁都在使用相同的協議，主機位置（一般都HTTPS），端口號（443是HTTPS的默認設置），以及（模文件,域由兩個網頁爲相同的值）被設置。 window.postMessage提供了一種控制機制，在某種程度上正確的使用是安全的繞過這個限制。該window.postMessage方法被調用時，會致使MessageEvent消息在目標窗口被分派時，任何未決的腳本，必須執行完畢後（例如，剩餘的事件處理程序，若是window.postMessage是從事件處理函數調用，先前設置的掛起超時等）的MessageEvent有類型的消息，它被設置爲提供給window.postMessage，對應於窗口調用window.postMessage在主文檔的原點的原點屬性的第一個參數的值的數據屬性時間window.postMessage被調用，而且它是從哪一個window.postMessage稱爲窗口源屬性。 （事件的其餘標準屬性都存在與他們的預期值。）

                        語法：otherWindow.postMessage(message, targetOrigin, [transfer]);

                                  windowObj: 接受消息的 Window 對象。
                                  message: 數據被髮送到其它窗口中。數據使用的結構化克隆算法序列。這意味着你能夠經過各類各樣安全數據對象目標窗口，而無需本身序列化。在最新的瀏覽器中能夠是對象。
                                  targetOrigin: 目標的源，* 表示任意。
                                  tansfer 可選 是與該消息傳送轉換對象序列。這些對象的全部權被提供給目的地和它們再也不在發送端使用。

                        message 事件就是用來接收 postMessage 發送過來的請求的。函數參數的屬性有如下幾個： 

                                   origin: 發送消息的 window 的源。
                                   data: 數據。
                                   source: 發送消息的 Window 對象。

//example1 

//其餘窗口能夠監聽經過執行下面的JavaScript派出的消息：

        window.addEventListener("message", receiveMessage, false);

        function receiveMessage(event)
            {
            var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
            if (origin !== "http://example.org:8080")
            return;

            // ...
        }




//example2

/*
 * In window A's scripts, with A being on :
 */

var popup = window.open(...popup details...);

// When the popup has fully loaded, if not blocked by a popup blocker:

// This does nothing, assuming the window hasn't changed its location.
popup.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");

// This will successfully queue a message to be sent to the popup, assuming
// the window hasn't changed its location.
popup.postMessage("hello there!", "http://example.org");

function receiveMessage(event)
{
  // Do we trust the sender of this message?  (might be
  // different from what we originally opened, for example).
  if (event.origin !== "http://example.org")
    return;

  // event.source is popup
  // event.data is "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);


//example3

/*
 * In the popup's scripts, running on :
 */

// Called sometime after postMessage is called
function receiveMessage(event)
{
  // Do we trust the sender of this message?
  if (event.origin !== "http://example.com:8080")
    return;

  // event.source is window.opener
  // event.data is "hello there!"

  // Assuming you've verified the origin of the received message (which
  // you must do in any case), a convenient idiom for replying to a
  // message is to call postMessage on event.source and provide
  // event.origin as the targetOrigin.
  event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!",
                           event.origin);
}

window.addEventListener("message", receiveMessage, false)

             

4 window對象的事件

         4.1 window.onerror

                    window.onerror 是一個針對錯誤事件的事件處理程序，錯誤事件是對不一樣類型的錯誤目標。當一個JavaScript運行時錯誤（包括語法錯誤）時，使用接口的ErrorEvent一個錯誤事件在窗口window.onerror被觸發時被調用。當資源（如一個<img>或<script>）未能加載，使用接口事件的錯誤事件的元素，發起負載被觸發，而且該元素上的onerror（）調用處理程序。這些錯誤事件不冒泡到窗口，但（至少在Firefox）能夠用一個捕獲window.addEventListener處理。安裝一個全球性的錯誤事件處理程序對錯誤報告自動收集有用的。

                    語法： 因爲歷史的緣由，不一樣的參數傳遞給window.onerror和element.onerror處理程序。
                                   window.onerror

window.onerror = function(message, source, lineno, colno, error) { ... };

                                    功能參數：
                                           message: 錯誤消息（string）。可做爲HTML的onerror=""的處理事件；
                                           source：  腳本的URL，其中引起的錯誤（string）；
                                           lineno:      出錯的錯誤行號（number）；
                                           colno:       對發生錯誤的行號列（number）；
                                           error:        錯誤的對象；

                                   當函數返回true,這樣能夠防止默認事件處理程序的處理。

window.onerror = function (msg, url, lineNo, columnNo, error) {
    var string = msg.toLowerCase();
    var substring = "script error";
    if (string.indexOf(substring) > -1){
        alert('Script Error: See Browser Console for Detail');
    } else {
        alert(msg, url, lineNo, columnNo, error);
    }
  return false;
};

                                 element.onerror
                                

 element.onerror = function(event) { ... }；

                                 element.onerror 接受帶有類型事件的單個參數的函數。

                                並非全部的錯誤，都會觸發JavaScript的error事件（即讓JavaScript報錯），只限於如下三類事件。

                                        1.JavaScript語言錯誤
                                        2.JavaScript腳本文件不存在
                                        3.圖像文件不存在

                                如下兩類事件不會觸發JavaScript的error事件。

                                        1.CSS文件不存在
                                        2.iframe文件不存

        4.2 alert()、confirm()、prompt()

                    alert()、prompt()、confirm()都是瀏覽器與用戶互動的全局方法。它們會彈出不一樣的對話框，要求用戶作出迴應。須要注意的是，alert()、prompt()、confirm()這三個方法彈出的對話框，都是瀏覽器統一規定的式樣，是沒法定製的。alert方法彈出的對話框，只有一個「肯定」按鈕，每每用來通知用戶某些信息。

                    語法：

//window.alert
//More JS: alert()

window.alert(message);


//window.confirm

result = window.confirm(message);

//window.prompt

result = window.prompt(message, default);

                       1.alert()

                                alert方法彈出的對話框，只有一個「肯定」按鈕，每每用來通知用戶某些信息。

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

                       2. confirm()

                                confirm方法彈出的對話框，除了提示信息以外，只有「肯定」和「取消」兩個按鈕，每每用來徵詢用戶的意見。confirm方法返回一個布爾值，若是用戶點擊「肯定」，則返回true；若是用戶點擊「取消」，則返回false。confirm的一個用途是，當用戶離開當前頁面時，彈出一個對話框，問用戶是否真的要離開。

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

                      3. prompt()     

                               prompt方法彈出的對話框，在提示文字的下方，還有一個輸入框，要求用戶輸入信息，並有「肯定」和「取消」兩個按鈕。它每每用來獲取用戶輸入的數據。

                               prompt方法的返回值是一個字符串（有可能爲空）或者null，具體分紅三種狀況。

                                        i: 用戶輸入信息，並點擊「肯定」，則用戶輸入的信息就是返回值。
                                       ii: 用戶沒有輸入信息，直接點擊「肯定」，則輸入框的默認值就是返回值。
                                      iii: 用戶點擊了「取消」（或者按了Esc按鈕），則返回值是null。

                               prompt方法的第二個參數是可選的，可是若是不提供的話，IE瀏覽器會在輸入框中顯示undefined。所以，最好老是提供第二個參數，做爲輸入框的默認值。

 

 

參考資料：

 

MDN    Web APIs > window

阮一峯  javascript 標準教程-window對象