《Javascript 高階程式設計(第三版)》筆記0xC BOM window 物件
阿新 • • 發佈：2018-12-13
目錄
innerWidth、 innerHeight、 outerWidth 和 outerHeight
window 物件
BOM 的核心物件是 window，它表示瀏覽器的一個例項。在瀏覽器中， window 物件有雙重角色，它既是通過 JavaScript 訪問瀏覽器視窗的一個介面，又是 ECMAScript 規定的 Global 物件。這意味著在網頁中定義的任何一個物件、變數和函式，都以 window 作為其 Global 物件，因此有權訪問parseInt()等方法。
全域性作用域
var age = 29;
function sayAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29全域性變數不能通過 delete 操作符刪除，而直接在 window 物件上的定義的屬性可以。
var age = 29;
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物件，可以知道某個可能未宣告的變數是否存在。
//這裡會丟擲錯誤，因為 oldValue 未定義
var newValue = oldValue;
//這裡不會丟擲錯誤，因為這是一次屬性查詢
//newValue 的值是 undefined
var newValue = window.oldValue;視窗關係及框架
如果頁面中包含框架，則每個框架都擁有自己的 window 物件，並且儲存在 frames 集合中。在 frames集合中，可以通過數值索引（從 0 開始，從左至右，從上到下）或者框架名稱來訪問相應的 window 物件。每個 window 物件都有一個 name 屬性，其中包含框架的名稱。
top
<html>
<head>
<title>Frameset Example</title>
</head>
<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>
</html>
parent
<html>
<head>
<title>Frameset Example</title>
</head>
<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>
</html>
<!-- anotherframeset.htm
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols="50%,50%">
<frame src="red.htm" name="redFrame">
<frame src="blue.htm" name="blueFrame">
</frameset>
</html>
-->視窗位置
screenLeft 和 screenTop 屬性
//可以跨瀏覽器取得視窗左邊和上邊的位置
var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY;moveTo()和 moveBy()方法
/*
* 這兩個方法可能會被瀏覽器禁用；而且，在 Opera 和 IE 7（及更高版本）中預設就
*是禁用的。另外，這兩個方法都不適用於框架，只能對最外層的 window 物件使用。
*/
//將視窗移動到螢幕左上角
window.moveTo(0,0);
//將窗向下移動 100 畫素
window.moveBy(0,100);
//將視窗移動到(200,300)
window.moveTo(200,300);
//將視窗向左移動 50 畫素
window.moveBy(-50,0);視窗大小
innerWidth、 innerHeight、 outerWidth 和 outerHeight
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;
}
}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、視窗目標、一個特性字串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前載入頁面的布林值。通常只須傳遞第一個引數，最後一個引數只在不開啟新視窗的情況下使用。
彈出視窗
//這行程式碼會開啟一個新的可以調整大小的視窗，視窗初始大小為 400×400 畫素，並且距螢幕上沿和左邊各 10 畫素。
window.open("http://www.wrox.com/","wroxWindow",
"height=400,width=400,top=10,left=10,resizable=yes");
//呼叫 close()方法還可以關閉新開啟的視窗,僅適用於通過 window.open()開啟的彈出視窗
wroxWin.close();安全限制
彈出視窗遮蔽程式
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!");
}間歇呼叫和超時呼叫
setTimeout()和clearTimeout()方法
/不建議傳遞字串！
setTimeout("alert('Hello world!') ", 1000);
//推薦的呼叫方式
setTimeout(function() {
alert("Hello world!");
}, 1000);//該時間後指定的程式碼不一定會執行
//要取消尚未執行的超時呼叫計劃，可以呼叫clearTimeout()方法並將相應的超時呼叫 ID 作為引數傳遞給它
//設定超時呼叫
var timeoutId = setTimeout(function() {
alert("Hello world!");
}, 1000);
//注意：把它取消
clearTimeout(timeoutId);setInterval()和clearInterval()
//不建議傳遞字串！
setInterval ("alert('Hello world!') ", 10000);
//推薦的呼叫方式
setInterval (function() {
alert("Hello world!");
}, 10000);
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
num++;
//如果執行次數達到了 max 設定的值，則取消後續尚未執行的呼叫
if (num == max) {
clearInterval(intervalId);
alert("Done");
}
}
intervalId = setInterval(incrementNumber, 500);一般認為，使用超時呼叫來模擬間歇呼叫的是一種最佳模式。
var num = 0;
var max = 10;
function incrementNumber() {
num++;
//如果執行次數未達到 max 設定的值，則設定另一次超時呼叫
if (num < max) {
setTimeout(incrementNumber, 500);
} else {
alert("Done");
}
}
setTimeout(incrementNumber, 500);系統對話方塊
瀏覽器通過 alert()、 confirm()和 prompt()方法可以呼叫系統對話方塊向用戶顯示訊息。通過這幾個方法開啟的對話方塊都是同步和模態的。即顯示這些對話方塊的時候程式碼會停止執行，而關掉這些對話方塊後代碼又會恢復執行。
alert()方法
//接受一個字串並將其顯示給使用者。
alert("Hello world!");confirm()
//除了顯示 OK 按鈕外，還會顯示一個 Cancel（“取消”）按鈕，兩個按鈕可以讓使用者決定是否執行給定的操作
confirm("Are yousure?");
if (confirm("Are you sure?")) {
alert("I'm so glad you're sure! ");
} else {
alert("I'm sorry to hear you're not sure. ");
}prompt()
//用於提示使用者輸入一些文字
prompt("What's your name?","Michael");
var result = prompt("What is your name? ", "");
if (result !== null) {
alert("Welcome, " + result);
}