JavaScript進階程式設計——BOM

2023-06-08 05:40:18

window對象：
1. BOM的核心，表示浏覽器的一個執行個體；
2. 在浏覽器中，window對象既是通過JavaScript通路浏覽器視窗的一個接口，又是ECMAScript規定的Global對象，這意味着在網頁中定義的任何一個對象、變量和函數，都以window 作為其 Global 對象，故有權通路parseInt()等方法；
3. 全局作用域
  1. 在全局作用域中聲明的變量、函數都會變成window對象的屬性和方法；
  2. 全局變量與直接在window對象上定義的屬性的差別：全局變量不能通過delete操作符删除，二直接在window對象上定義的屬性可以；
  3. 通路未聲明的變量時将報錯，此時可以通過查詢window對象屬性的方式來判斷屬性是否存在； var newValue = oldValue; //會抛出錯誤，因為oldValue未定義 var newValue = windwo.oldValue; //不會抛錯，因為這是一次屬性查詢，未定義的将會傳回undefined
4. 視窗關系及架構
  1. 頁面中包含架構時，每個架構都有自己的window對象，并且儲存在frames集合中；
  2. frames集合中，可以通過數值索引（從0開始，從左至右，從上到下）或者架構名稱來通路相應的window對象；
  3. 每個window對象都包含name屬性，表示架構名稱；
  4. top對象：始終指向最高（最外）層的架構，也就是浏覽器視窗；對于最上層的架構，除非是通過window.open()打開的，否則其window對象的name屬性不包含任何值；
  5. parent對象：始終指向目前架構的直接上層架構（在沒有架構的情況下，parent一定等于top）；
  6. self對象：始終隻想window，可以與window對象互換使用；
  7. 上面的所有對象都是window對象的屬性，可以通過點操作符進行通路，如window.top、window.parent等；
5. 視窗位置：
  1. window.screenLeft、window.screenTop：IE、Safari、Opera和Chrome都支援該屬性
  2. window.screenX、window.screenY：FireFox支援該屬性，同時Safari和Chrome也同時支援；
  3. 跨浏覽器擷取視窗左邊與上邊位置：
    
    var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
    
    var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
  4. window.moveTo(x, y)：傳入新位置的x，y坐标值；
  5. window.moveBy(hPixel,vPixel)：傳入水準和垂直方向上移動的像素數；
  6. moveTo()、moveBy()可能會被浏覽器禁用；且在Opera和IE7（或更高版本）中預設是禁用的；且這兩個方法均不适用于架構，隻能對最外層的window對象使用；
6. 視窗大小：
  1. 屬性：innerWidth、innerHeight、outerWidth 和outerHeight
  2. IE9+、Firefox、Safari、Opera 和Chrome 均為此提供了此4 個屬性；
  3. outerWidth 和outerHeight 屬性：在IE9+、Safari 和Firefox中，這兩個屬性傳回的是浏覽器視窗本身的尺寸（無論是從最外層的window 對象還是從某個架構通路）；在Opera 中，則表示頁面視圖容器的大小;
  4. innerWidth 和innerHeight屬性：表示該容器中頁面視圖區的大小（減去邊框寬度）；
  5. 在Chrome 中，outerWidth、outerHeight 與innerWidth、innerHeight 傳回相同的值，即視口（viewport）大小而非浏覽器視窗大小；
  6. 擷取頁面可視視窗大小：
```
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
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;
    }
}
           
```
  7. resizeTo()和resizeBy()：調整浏覽器視窗的大小；resizeTo()接收浏覽器視窗的新寬度和新高度，而resizeBy()接收新視窗與原視窗的寬度和高度之差；
7. 導航和打開視窗
  1. window.open(url, target, character, isReplace)：既可以導航到一個特定的URL，也可以打開一個新的浏覽器視窗
    1. url：要加載的URL
    2. target：視窗目标，當該參數是已有視窗或架構的名稱，則會在具有該名稱的視窗或架構中加載第一個參數指定的URL；
    3. character：是一個逗号分隔的設定字元串，在target不是已存在的視窗或架構情況下作為新視窗或新标簽頁特性，否則忽略該參數；
      
      JavaScript進階程式設計——BOM
    4. isReplace：表示新頁面是否取代浏覽器曆史記錄中目前加載頁面的布爾值；
    5. 通常隻須傳遞第一個參數，最後一個參數隻在不打開新視窗的情況下使用。
  2. window.open()方法會傳回一個指向新視窗的引用：
```
var newWindow = window.open("http://www.wrox.com/","wroxWindow", "height=400,width=400,top=10,left=10,resizable=yes");
           
```
    1. 引用的對象與其他window 對象大緻相似，但我們可以對其進行更多控制；
    2. newWindow.resizeTo(500,500)：調整大小;
    3. newWindow.moveTo(100,100)：移動位置;
    4. newWindow.close()：關閉新打開的視窗，該方法僅适用于通過window.open()打開的彈出視窗;
    5. newWindow.opener：新建立的window 對象的屬性，儲存着打開它的原始視窗對象，這個屬性隻在彈出
      
      視窗中的最外層window 對象（top）中有定義，而且指向調用window.open()的視窗或架構；
    6. newWindow.opener = null：将opener 屬性設定為null 就是告訴浏覽器新建立的标簽頁不需要與打開它的标簽頁通信，是以可以在獨立的程序中運作；
  3. 安全限制
  4. 彈出視窗屏蔽程式
    1. 彈出視窗被屏蔽有兩種情況：一種是浏覽器内置程式屏蔽；另一種是由第三方擴充程式屏蔽；
    2. 若彈出視窗是被浏覽器内置程式屏蔽，則執行判斷window.open()傳回的值是否為null即可判斷：
```
var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null){
    alert("The popup was blocked!");
}
           
```
    3. 若是被第三方擴充程式屏蔽，window.open()将會抛出一個錯誤，是以需要通過try-catch将其捕獲
```
var blocked = false;
try {
    var wroxWin = window.open("http://www.wrox.com", "_blank");
    if (wroxWin == null){
        blocked = true;
    }
} catch (ex){
    blocked = true;
}
if (blocked){
    alert("The popup was blocked!");
}
           
```
  5. 間歇調用與逾時調用
    1. setTimeout(execCode, time)：
      1. execCode：可以是一個包含JavaScript代碼的字元串，也可以是一個函數（推薦使用）；
      2. time：等待時間，機關時毫秒；
      3. 該方法将傳回一個數值ID，表示逾時調用，該ID是計劃執行代碼的唯一辨別符，可通過它來取消逾時調用（通過clearTimeout(逾時調用ID)取消）；
      4. 逾時調用的代碼是在全局作用域中執行的，故在非嚴格模式下this指向window對象，嚴格模式下則為undefined；
    2. setInterval(execCode, time)：
      1. execCode：與setTimeout相同
      2. time：執行間隔時間；
      3. 該方法調用後同樣會傳回一個數值ID，表示間隔調用，該ID可用于取消間隔調用（通過clearInterval(間隔調用ID)取消）；
  6. 系統對話框
    1. alert()、confirm()、prompt()
    2. 外觀由作業系統及（或）浏覽器設定決定，而不是由CSS 決定；
    3. 通過這幾個方法打開的對話框都是同步和模态的。也就是說，顯示這些對話框的時候代碼會停止執行，而關掉這些對話框後代碼又會恢複執行；
    4. confirm()方法傳回的是布爾值：true 表示單擊了OK，false 表示單擊了Cancel 或單擊了右上角的X 按鈕;
    5. prompt(顯示的内容, 輸入框預設内容)方法傳回文本輸入域的值：提示框中除了顯示OK 和Cancel 按鈕之外，還會顯示一個文本輸入域，以供使用者在其中輸入内容；
    6. window.print()：
    7. window.find()：
8. location對象
  1. 概述
    1. location 是最有用的BOM對象之一，它提供了與目前視窗中加載的文檔有關的資訊，還提供了一些導航功能；
    2. window.location 和document.location 引用的是同一個對象；
    3. 它将URL 解析為獨立的片段，讓開發人員可以通過不同的屬性通路這些片段；
    4. location的屬性：
      
      JavaScript進階程式設計——BOM
    5. 查詢字元串參數
```
function getQueryStringArgs(){
    //取得查詢字元串并去掉開頭的問号
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    //儲存資料的對象
    args = {},
    //取得每一項
    items = qs.length ? qs.split("&") : [],
    item = null, name = null, value = null,
    //在for 循環中使用
    i = 0,
    len = items.length;
    //逐個将每一項添加到args 對象中
    for (i=0; i < len; i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if (name.length) {
            args[name] = value;
        }
    }
    return args;
}

方法的調用
//假設查詢字元串是?q=javascript&num=10
var args = getQueryStringArgs();
alert(args["q"]); //"javascript"
alert(args["num"]); //"10"
           
```
    6. 位置操作
      1. location.assign(url)：在目前頁面打開新URL 并在浏覽器的曆史記錄中生成一條記錄，該方法與通過window.location、location.href來設定URL值的效果相同；
      2. location.replace(url)：在目前頁面打開新URL，但不會在浏覽器的曆史記錄中生成記錄；
      3. location.reload()：
        
        location.reload();有可能從緩存中加載（如果頁面自上次請求以來并沒有改變過，頁面就會從浏覽器緩存中重新加載）；
        
        location.reload(true);重新加載（強制從伺服器重新加載）
        
        位于reload()調用之後的代碼可能會也可能不會執行，這要取決于網絡延遲或系統資源等因素。是以，最好将reload()放在代碼的最後一行。

javascript bom Window對象

上一篇: JS回歸基礎之BOM 

下一篇: JavaScript BOM對象模型

繼續閱讀