BOM 浏覽器對象

BOM介紹：

BOM是Browser Object Model的縮寫，簡稱浏覽器對象模型

最初是Netscape浏覽器标準的一部分

JavaScript文法的标準化組織是ECMA，DOM的标準化組織是W3C

BOM到目前為止缺乏标準

整體結構：

1.Window 對象（父對象）

<1>移動

moveBy(x,y)

moveTo(x,y)

<2>大小

resizeBy(w,h)

resizeTo(w,h)

<3>滾動

scrollTo(x,y)

scrollBy(x,y)

<4>焦點

focus()——使窗體或控件擷取焦點

blur()——與focus函數相反，使窗體或控件失去焦點

<5>打開，關閉

open()——打開(彈出)一個新的窗體

close()——關閉窗體

特别注意：以下四個方法均屬于Window對象

setInterval    

setTimeout   

clearInterval 

clearTimeout  

2.History 對象

length 傳回浏覽器曆史清單中的URL數量

console.log(history.length);

back()方法

forward()方法

go("url" or num)方法

3.Location 對象

hash URL最後面#及後的值

host 主機名和目前URL的端口号

hostname 主機名

href 完整的URL

pathname URL的路徑部分

port 目前URL端口号

protocol 目前URL協定

search 從問号開始的URL部分

console.log(location.hash);//#4
console.log(location.host);//baike.baidu.com
console.log(location.hostname);//baike.baidu.com
console.log(location.href);//http://baike.baidu.com/link?url=EhJsUOR0oOs_T3ohX_R9j7qzeiV_m4nkxcZZ2htd4ZaiWkEjU0z7k--bZnU2XkFiFcAG0UJ-tDP5mUu3R0ULOa#4
console.log(location.pathname);// /link
console.log(location.port);// 空
console.log(location.protocol);// http:
console.log(location.search);// ?url=EhJsUOR0oOs_T3ohX_R9j7qzeiV_m4nkxcZZ2htd4ZaiWkEjU0z7k--bZnU2XkFiFcAG0UJ-tDP5mUu3R0ULOa
           

reload()方法 參數預設為false

為true時，強制重新下載下傳頁面

為false時，會先去服務端檢視該頁面是否已經改變，

若沒改變則浏覽器緩存中加載，若已經改變則重新下載下傳頁面

assign()方法 加載新的文檔，這與直接将一個URL指派給Location對象的href屬性效果一樣

replace()方法 用新的文檔替換目前文檔，replace()方法不會在History對象中生成一個新

的記錄。當使用該方法時，新的URL将覆寫History對象中的目前記錄。

問題：（解析url，通過key擷取參數）

function getParamByKey(key){
	var msg = location.search.substring(1).split("&");
	for(i in msg){
		var obj = msg[i];
		var obj_key = obj.substring(0,obj.indexOf("="));
		var obj_value = obj.substring(obj.indexOf("=")+1);
		if(obj_key==key){
			return obj_value;
		}
		
	}
}
console.log(getParamByKey("tn"));
           

4.Navigator 對象

appCodeName 傳回浏覽器的代碼名

appName 傳回浏覽器的名稱

appVersion 傳回浏覽器的平台和版本資訊

browserLanguage 傳回目前浏覽器的語言

cookieEnabled 傳回指明浏覽器中是否啟用cookie的布爾值

cpuClass 傳回浏覽器系統的 CPU 等級

onLine 傳回指明系統是否處于脫機模式的布爾值

platform 傳回運作浏覽器的作業系統平台

systemLanguage 傳回 OS 使用的預設語言

userAgent 傳回由客戶機發送伺服器的 user-agent 頭部的值

userLanguage 傳回 OS 的自然語言設定

console.log(navigator.appCodeName);//Mozilla
console.log(navigator.appName);//Netscape
console.log(navigator.appVersion);//5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.89 Safari/537.36
console.log(navigator.browserLanguage);//undefined
console.log(navigator.cookieEnabled);//true
console.log(navigator.cpuClass);//undefined
console.log(navigator.onLine);//true
console.log(navigator.platform);//Win32
console.log(navigator.systemLanguage);//undefined
console.log(navigator.userAgent);//Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.89 Safari/537.36
console.log(navigator.userLanguage);//undefined
           

var browser = window.navigator.userAgent;

谷歌浏覽器：

"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36"

Opera浏覽器：

"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.111 Safari/537.36 OPR/27.0.1689.69"

360極速浏覽器：

"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 Safari/537.36"

360安全浏覽器：

"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1"

Safari浏覽器：

"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2"

ie浏覽器：

"Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)"

Firefox浏覽器：

"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0"

5.screen 對象

console.log("螢幕寬度："+screen.width + " 可用寬度：" + screen.availWidth);
console.log("螢幕高度："+screen.height + " 可用高度：" + screen.availHeight);
console.log("螢幕色深："+screen.colorDepth);
           

6. document 對象

document.anchors 

是一個數組，包含了文檔中所有錨标記（包含 name 屬性的<a>标記）

document.links 

是一個數組，包含了文檔中所有連接配接标記（包含 href 屬性的<a>标記和<map>标記段裡的<area>标記）

注意二者之間的差別

document.all

document.forms

document.images

7. frames 對象

包含了架構的版面布局資訊，以及每一個架構所對應的視窗對象

在架構集或包含iframe标簽的頁面中，frames集合包含了對有架構中視窗的引用

frames.length;