JavaScript BOM——「window 對象」的注意要點

時間  2020-02-06
標籤 javascript bom window 對象 注意 要點 欄目 JavaScript 简体版
原文   原文鏈接

全局做用域

window 在是BOM 的核心對象，他是瀏覽器的一個實例。瀏覽器

在全局做用域中聲明的變量、函數都會變成window 對象的屬性和方法。如：框架

var age = 18;
function sayAge(){
    console.log(window.age);
}

console.log(window.age); //18
sayAge(); //18
window.sayAge(); //18

定義全局變量與在 window 對象上直接定義屬性還
是有一點差異：全局變量不能經過 delete 操做符刪除，而直接在 window 對象上的定義的屬性能夠。如：函數

var age = 29; // var 語句添加的 window 屬性[[Configurable]] 爲 false
window.color = "red";
//在 IE < 9 時拋出錯誤，在其餘全部瀏覽器中都返回 false
delete window.age;
//在 IE < 9 時拋出錯誤，在其餘全部瀏覽器中都返回 true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined

另外，經過查詢 window 對象，能夠知道某個可能未聲明的變量是否存在，如：工具

var newValue = oldValue; //oldValue is not defined

var newValue = window.oldValue; //這個算是查詢，若是沒有定義也不會報錯

窗口關係及框架

top

每一個框架都擁有本身的window 對象，而且保存在frames 集合中。每一個 window 對象都有一個 name 屬性，其中包含框架的名稱。如：性能

<frameset rows="160,*">
<frame src="frame.htm" name="topFrame">
    <frameset cols="50%,50%">
        <frame src="anotherframe.htm" name="leftFrame">
        <frame src="yetanotherframe.htm" name="rightFrame">
    </frameset>
</frameset>

以上代碼建立了一個框架集，其中一個框架居上，兩個框架居下。能夠經過window.frames[0] 或者 window.frames["topFrame"] 來引用上方的框架。不過，恐怕最好使用top 而非 window 來引用這些框架（例如，經過 top.frames[0] ）。學習

parent

與 top 相對的另外一個 window 對象是 parent 。 parent （父）對象始終指向當前框架的直接上層框架。在沒有框架的狀況下， parent 必定等於top （此時它們都等於 window ）。如：插件

<frameset rows="100,*">
    <frame src="frame.htm" name="topFrame">
    <frameset cols="50%,50%">
        <frame src="anotherframe.htm" name="leftFrame">
        <frame src="anotherframeset.htm" name="rightFrame">
    </frameset>
</frameset>

這個框架集中的一個框架包含了另外一個框架集，該框架集的代碼以下所示。線程

<frameset cols="50%,50%">
    <frame src="red.htm" name="redFrame">
    <frame src="blue.htm" name="blueFrame">
</frameset>

若是代碼位於redFrame（或blueFrame）中，那麼parent 對象指向的就是 rightFrame 。若是代碼位於topFrame 中，則parent 指向的是top。code

self

與框架有關的最後一個對象是 self ，它始終指向 window ；實際上， self 和 window 對象能夠互
換使用。引入 self 對象的目的只是爲了與 top 和 parent 對象對應起來，所以它不格外包含其餘值。htm

窗口位置

screenLeft和screenTop

screenLeft 和 screenTop 屬性，分別用於表示窗口相對於屏幕左邊和上邊的位置。Firefox 則在screenX 和 screenY 屬性中提供相同的窗口位置信息，Safari 和 Chrome 也同時支持這兩個屬性。Opera雖然也支持 screenX 和 screenY 屬性，但與 screenLeft 和 screenTop 屬性並不對應，所以建議你們不要在 Opera 中使用它們。如：

<body>
    <input type="text" id="input">
    <script>
        var x = self.setInterval("getPos()",10);
        var input = document.getElementById("input");
        
        function getPos(){
            var leftPos;
            if(typeof window.screenLeft == "number"){ //首先肯定screenLeft 和screenTop 屬性是否存在，若是不存在（在 Firefox 中），則取得screenX 和screenY 的值。
                leftPos = window.screenLeft;
            }else{
                leftPos = screenX;
            }
            input.value = leftPos;
        }
    </script>
</body>

上面這個代碼能夠直接在input 中顯示screenLeft 或screenX 的值。

因爲各類緣由，沒法在跨瀏覽器的條件下取得窗口左邊和上邊的精確座標值。

moveTo和moveBy

這兩個方法都接收兩個參數，其中moveTo() 接收的是新位置的 x 和 y 座標值，而 moveBy() 接收的是在水平和垂直方向上移動的像素數。如：

//將窗口移動到屏幕左上角
window.moveTo(0,0);
//將窗向下移動 100 像素
window.moveBy(0,100);
//將窗口移動到(200,300)
window.moveTo(200,300);
//將窗口向左移動 50 像素
window.moveBy(-50,0);

須要注意的是，這兩個方法可能會被瀏覽器禁用，這兩個方法都不適用於框架，只能對最外層的 window 對象使用。

窗口大小

innerWidth、innerHeight、outerWidth和outerHeight

  • 在 IE9+、Safari和 Firefox中， outerWidth 和 outerHeight 返回瀏覽器窗口自己的尺寸。

  • 在Opera中， outerWidth 和 outerHeight 這兩個屬性的值表示頁面視圖容器的大小。

  • 而innerWidth 和 innerHeight則表示該容器中頁面視圖區的大小。

  • 在 Chrome 中， outerWidth 、 outerHeight 與innerWidth 、 innerHeight 返回相同的值，即視口（viewport）大小。

  • IE8 及更早版本沒有提供取得當前瀏覽器窗口尺寸的屬性，單能夠經過DOM 取得可見區域的相關信息：

    • 在 IE、Firefox、Safari、Opera 和 Chrome 中，document.documentElement.clientWidth 和document.documentElement.clientHeight 中保存了頁面視口的信息。

    • 在 IE6 中，這些屬性必須在標準模式下才有效；若是是混雜模式，就必須經過 document.body.clientWidth 和 document.body.clientHeight 取得相同信息。

    • 而對於混雜模式下的 Chrome，則不管經過 document.documentElement 仍是 document.body 中的 clientWidth 和 clientHeight 屬性，均可以取得視口的大小。

因此沒法準確肯定窗口自己的大小，但能夠取得準確的頁面視口的大小：

  • 其餘瀏覽器能夠經過innerWidth 和innerHeight 取得；

  • IE8 以前能夠經過DOM 取得：

    • 標準模式下經過document.documentElement.clientWidth 和document.documentElement.clientHeight 取得；

    • 混雜模式下經過document.body.clientWidth 和document.body.clientHeight取得；

能夠用如下代碼獲取innerWidth 和innerHeight（其中，document.compatMode用來判斷當前瀏覽器採用的渲染方式。BackCompat：標準兼容模式關閉。CSS1Compat：標準兼容模式開啓。）：

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;
    }
}

其餘具體的有關移動設備視口的話題，推薦學習移動Web 開發。

resizeTo和resizeBy方法

這兩個方法都接收兩個參數，其中 resizeTo() 接收瀏覽器窗口的新寬度和新高度，而 resizeBy() 接收新窗口與原窗口的寬度和高度之差。如：

//調整到 100×100
window.resizeTo(100, 100);
//調整到 200×150
window.resizeBy(100, 50);
//調整到 300×300
window.resizeTo(300, 300);

有可能被瀏覽器禁用。

導航和打開窗口

使用 window.open() 方法既能夠導航到一個特定的 URL，也能夠打開一個新的瀏覽器窗口。這個方法能夠接收 4 個參數：要加載的 URL、窗口目標、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。一般只須傳遞第一個參數，最後一個參數只在不打開新窗口的狀況下使用。

//等同於< a href="http://www.wrox.com" target="topFrame"></a>
window.open("http://www.wrox.com/", "topFrame");

意思是在名爲'topFrame'的框架中打開URL。這個參數也能夠是： _self 、 _parent 、 _top 或 _blank 。

彈出窗口

若是給 window.open() 傳遞的第二個參數並非一個已經存在的窗口或框架，那麼該方法就會根據在第三個參數位置上傳入的字符串建立一個新窗口或新標籤頁。若是沒有傳入第三個參數，那麼就會打開一個帶有所有默認設置的新瀏覽器窗口。第三個參數主要有：

fullscreen
yes 或 no 表示瀏覽器窗口是否最大化。僅限IE

height
數值  表示新窗口的高度。不能小於100

width
數值  表示新窗口的寬度。不能小於100

top
數值  表示新窗口的上座標。不能是負值

left
數值  表示新窗口的左座標。不能是負值
location
yes 或 no 表示是否在瀏覽器窗口中顯示地址欄。不一樣瀏覽器的默認值不一樣。若是設置爲no，地址欄可能會隱藏，也可能會被禁用（取決於瀏覽器）

menubar
yes 或 no 表示是否在瀏覽器窗口中顯示菜單欄。默認值爲 no

resizable
yes 或 no 表示是否能夠經過拖動瀏覽器窗口的邊框改變其大小。默認值爲 no

scrollbars
yes 或 no 表示若是內容在視口中顯示不下，是否容許滾動。默認值爲 no

status
yes 或 no 表示是否在瀏覽器窗口中顯示狀態欄。默認值爲 no

toolbar
yes 或 no 表示是否在瀏覽器窗口中顯示工具欄。默認值爲 no

注意，整個特性字符串中不容許出現空格。

調整新窗口大小

有些瀏覽器不容許咱們針對主瀏覽器窗口調整大小或移動位置。經過 window.open 返回的對象，能夠像操做其餘窗口同樣操做新打開的窗口：

var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");
newWindow.resizeTo(400,1000);

關閉新窗口

調用 close() 方法還能夠關閉新打開的窗口。

var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");

newWindow.close(); //打開以後馬上關閉

固然也可使用window.close()。

opener屬性

opener 屬性，其中保存着打開它的原始窗口對象。

var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");

document.write(newWindow.opener == window); //true

將 opener 屬性設置爲 null 就是告訴瀏覽器新建立的標籤頁不須要與打開它的標籤頁通訊，所以能夠在獨立的進程中運行。

var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");

newWindow.opener = null;

彈出窗口屏蔽程序

兩種狀況：

  1. 瀏覽器內置的屏蔽程序阻止的彈出窗口，window.open() 返回null，只要檢測這個值便可；

  2. 瀏覽器擴展或其餘程序阻止的彈出窗口，window.open() 拋出錯誤，則須要把 window.open() 封裝在一個 try-catch 塊中；

對於第一種：

var popWin = window.open("http://www.baidu.com/","_blank");
if (popWin == null){
    console.log("the popup was blocked by explorer!")
}

若是 popWin 被瀏覽器內置的屏蔽程序阻止了，檢測到 popWin 的值爲 null；

對於第二種：

var blocked = false; //預設彈出窗口沒有被屏蔽

//try-catch 代碼塊開始
try {
    var popWin = window.open("http://www.baidu.com/","_blank");
    if (popWin == null){
        blocked = true; //若是值爲null，說明被瀏覽器內置屏蔽程序屏蔽
    }
} catch(ex){
    blocked = true; //若是收到錯誤，說明被瀏覽器屏蔽插件屏蔽
}
//try-catch 代碼塊結束

//若是被屏蔽，返回字符串提示
if (blocked){
    console.log("the popup was blocked!")
}

間歇調用和超時調用

JavaScript 是單線程語言。一個是在指定的時間後執行代碼，另外一個是每隔指定的時間就執行一次代碼。

setTimeout()方法

接收兩個參數，一個是要執行的代碼，一個是以毫秒爲單位的時間。如：

setTimeout("document.write('running!')", 1000);

setTimeout(function(){
    document.write("running it!")
}, 2000);

因爲傳遞字符串會致使性能問題，所以不建議用字符串做爲第一個參數。

另外，JavaScript 有一個任務列隊，若是列隊是空的，添加的代碼會當即執行；若是列隊不是空的，那麼要等到前面的代碼執行完了之後再執行。

clearTimeout()方法

調用setTimeout()方法後，該方法會返回一個調用 ID。這個超時調用 ID 是計劃執行代碼的惟一標識符，能夠經過它來取消超時調用。如：

var x = setTimeout(function(){
    document.write("running it!")
}, 3000);

setTimeout(function(){
    clearTimeout(x)
}, 2000); //由於在2秒鐘的時候把 x 超時調用取消了，因此 3 秒後的超時調用則不會出現。

setInterval()方法 （因爲一些緣由，最好不要使用間歇調用）

參數仍然是兩個，一個是指定的執行代碼，另外一個是間歇時間。如：

setInterval("document.write('running!')", 1000);

setInterval(function(){
    document.write("running it!!!")
}, 1500);

一樣的，調用該方法會返回一個間歇調用ID。使用clearInterval()中止：

var list = [32,14,21,34,254,3,25,4315,43,654,36,5431,1];
var num = 0;

var x = setInterval(showList, 100);
function showList(){
    console.log(list[num]);
    num ++;
    if (num == list.length){
        clearInterval(x)
        console.log("done!")
    }
}

如上，以 100 毫秒的速度遍歷全部 list 的值。

也可使用超時調用來實現，如：

var list = [32,14,21,34,254,3,25,4315,43,654,36,5431,1];
var num = 0;

setTimeout(showList, 100);

function showList(){
    console.log(list[num]);
    num ++;
    if (num < list.length){
        setTimeout(showList, 100);
    }else{
        console.log("done!");
    }
}

最好使用超時調用來模擬間歇調用。

系統對話框

alert()

一個字符串參數，並將其顯示給用戶。

confirm()

一個字符串參數，並將其顯示給用戶，提供兩個按鈕，一個 Ok 按鈕返回布爾值 true；另外一個按鈕 Cancel 返回布爾值 false。

prompt()

一個「提示框」，接收連兩個參數： 要顯示給用戶的文本提示和文本輸入域的默認值（能夠爲空字符串）。

如：

var str = prompt("insert your name here", "");
if (str.length > 0){
    alert("welcome " + str);
    var result = confirm("would you want something to drink ?");
    if (result){
        document.write("please wait");
    }else{
        document.write("have a seat");
    }
}else {
    alert("can not define");
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程