小白讀《JavaScript高階程式設計》BOM部分筆記

阿新 • • 發佈：2018-11-04

BOM

如果要在Web中使用JavaScript，那麼BOM（瀏覽器物件模型）是真正的核心。
BOM提供了很多物件，用於訪問瀏覽器的功能，這些功能與任何網頁內容無關。

window物件

BOM的核心物件是window，它表示瀏覽器的一個例項。
window物件的雙重身份：

它是通過JavaScript訪問瀏覽器視窗的一個介面。
它也是ECMAScript規定的Global物件

全域性作用域

所有在全域性作用域中宣告的變數、函式都會變成window物件的屬性和方法。
定義全域性變數與在window物件上直接定義屬性的差別：
全域性變數不能通過delete操作符刪除。

嘗試訪問未宣告的變數會丟擲錯誤，但是通過查詢window物件，可以知道某個可能未宣告的變數是否存在。

var newValue = oldValue;
//這裡會丟擲錯誤，因為oldValue未定義
var newValue = window.oldValue;
//這裡不會丟擲錯誤，因為這是一次屬性查詢

視窗關係及框架

如果頁面中包含框架，則每個框架都擁有自己的window物件，並且儲存在frames集合中。

三個與框架有關的window物件

1.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>

示例圖片1
通過window.frames[0]或者window.frames[“topFrame”]來引用上方的框架。
不過建議將window換成top。

與top相對的另一個window物件是parent（父）。

2.parent物件：始終指向當前框架的直接上層框架。
注意：除非最高層視窗是通過window.open()開啟的，否則其window物件的name屬性不會包含任何值。

3.self物件：它始終指向window。

以上都是window物件的屬性，可以用window.parent、window.top、window.self等形式來訪問。

視窗位置

IE、Safari、Opera和Chrome：
screenLeft和screenTop屬性：分別用於表示視窗相對於螢幕左邊和上邊的位置。
Firefox、Safari、Opera和Chrome：
screenX和screenY屬性。

記住，位置資訊是相對頁面可見區域左上角。

兩個移動方法（可能被瀏覽器禁用）
moveTo()和moveBy()。
moveTo()：接受新位置的x和y座標值。
moveBy()：接收的是在水平和垂直方向上移動的畫素值。

視窗大小

IE9+、Firefox、Safari、Opera和Chrome提供四個屬性：

innerWidth
innerHeight
outerWidth
outerHeight

這四個屬性不同瀏覽器返回結果不一樣，要用的時候再確認一下吧。
類似的屬性有：

document.documentElement.clientWidth
document.documentElement.clientHeight
document.body.clientWidth
document.body.clientWidth

一個封裝的函式：

function getWidthAndHeight(){
	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;
		}
	}
	return [pageWidth,pageHeight];
}

可以放在一個叫utill.js的檔案下，以後可能有用哦。
示例圖片2

調整瀏覽器視窗的大小的兩個方法
resizeTo()和resizeBy()方法。

導航和開啟視窗

使用window.open()方法既可以導航到一個特定的URL，也可以開啟一個新的瀏覽器視窗。
4個引數：

要載入的URL
視窗目標
一個特性字串
一個表示新頁面是否取代瀏覽器歷史記錄中當前載入頁面的布林值。

1.彈出視窗

fullscreen
heigh
left
location
menubar
resizable
scrollbars
status
toolbar
top
width

opener屬性：儲存著開啟它的原始視窗物件。

關閉視窗

呼叫close()方法。
newWindow.close();

2.安全限制

一些廣告視窗不斷彈出，引誘使用者點選。

3.彈出視窗遮蔽程式

一般瀏覽器有內建，若沒有，可以安裝Yahoo!Toolbar等帶有內建遮蔽程式的實用工具。
如果有遮蔽彈出視窗的程式，則open()會變成null，所以需要檢驗一下：

function textIfWindowOpenIsNull(url) {
	var blocked = false;
	try {
		var wroxWin = window.open(url,"_blank");
		if (wroxWin == null) {
			blocked = true;
		}
	} catch (ex){
		blocked = true;
	}
	if (blocked) {
		alert("The popup was blocked!");
	}
}

間歇呼叫和超時呼叫

JavaScript是單執行緒語言，但它允許通過設定超時值和間歇值來排程程式碼在特定的時刻執行。
超時呼叫（只執行一次）：setTimeout()方法，接受兩個引數：要執行的程式碼和以毫秒錶示的時間。
第一個引數可以是包含JavaScript程式碼的字串或者是一個函式。
取消：clearTimeout()方法，將相應的超時呼叫的ID作為引數傳遞給它。

間歇呼叫（執行多次）：setInterval()，引數和setTimeout()一樣。
取消：clearInterval()方法。

系統對話方塊

alert()、confirm()、prompt()方法可以呼叫系統對話方塊向用戶顯示訊息。
alert()：警告。
confirm()：確認，會返回一個布林值。
prompt()：提升使用者輸入一些文字，方法接受兩個引數：要顯示給使用者的文字提示和文字輸入域的預設值（可以是一個空字串）。
返回輸入內容，沒有或取消則為null。

find()：顯示查詢的對話方塊。
print()：顯示列印的對話方塊。

location物件

location是最有用的BOM物件之一。
window.location和document.location引用的是同一個物件。
Loaction物件的屬性：

hash
host
hostname
href
pathname
port
portocol
search

查詢字串引數

封裝一個函式，用來解析查詢字串，然後返回包含所有引數的一個物件：

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

位置操作

使用assign()方法併為其傳遞一個URL。

通過使用replace()方法，使用者不能回到前一個頁面。
重新載入：reload()方法。引數為true式強制從伺服器重新載入。

navigator物件

appCodeName
appMinorVersion
appName
buildID
cookieEnabled
cpuClasss
javaEnabled()
language
mineTypes
onLine
opsProfile
oscpu
platform
plugins
preference()
product
productSub
registerContentHandler()
registerPeotocolHandler()
securityPolicy
systemLanguage
taintEnabled()
userAgent
userLanguage
userProfile
vendor
vendorSub

檢測外掛

使用plugins陣列來檢測瀏覽器中是否安裝了特定的外掛。

name：外掛的名字
description：外掛的描述
filename：外掛的檔名
length：外掛所處理的MIME型別數量

//檢測外掛（在IE中無效）
function hasPlugins(name) {
	name = name.toLowerCase();
	for (var i = 0; i < navigator.plugins.length; i++) {
		if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
			return true;
		}
	}
	return false;
}

//檢測IE中的外掛
function hasIEPlugin(name) {
	try {
		new ActiveXObject(name);
		return true;
	} catch (ex) {
		return false;
	}
}

註冊處理程式

registerContentHandler()方法：三個引數：

要處理的MIME型別
可以處理該MIME型別的頁面的URL
應用程式的名稱

registerPeotocolHandler()方法：三個引數：

要處理的協議（例如，mailto或ftp）
處理該協議的頁面的URL
應用程式的名稱

screen物件

略

history物件

go()方法，裡面引數是數值。
back()方法：後退，引數是數值。
forward()方法：前進，引數是數值。