bom

1、定義javascript

BOM(Browser Object Model) 即瀏覽器對象模型,主要是指一些瀏覽器內置對象如:html

window   全局對象    具備雙重角色:它既是ECMAscript規定的全局global對象,又是javascript訪問瀏覽器窗口的一個接口、  java

location   與地址欄內容相關、數組

navigator  瀏覽器相關的內容,一般判斷瀏覽器類型都是經過這個對象、瀏覽器

screen   判斷屏幕的高度寬度、緩存

history  訪問瀏覽器的歷史記錄,如前進、後臺、跳轉到指定位置服務器

document   DOM是屬於BOM的一個屬性,cookie

等對象,用於完成一些操做瀏覽器的特定API。網絡

其中表明瀏覽器窗口的Window對象是BOM的頂層對象,其餘對象都是該對象的子對象。  BOM缺少標準,JavaScript語法的標準化組織是ECMA,DOM的標準化組織是W3C。app

2、詳述

1.window

moveBy() 函數  moveTo() 函數   resizeBy() 函數    resizeTo() 函數   scrollTo() 函數   scrollBy() 函數    
focus() 函數 blur() 函數 open() 函數 close() 函數 alert() 函數 confirm() 函數 prompt() 函數 defaultStatus 屬性 status 屬性 opener 屬性
setTimeout() 函數 clearTimeout() 函數 setInterval() 函數 clearInterval() 函數
經常使用場景
1.1獲取窗口相對於屏幕左上角的位置

window.onresize = function() {
var leftPos = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenLeft === 'number') ? window.screenTop : window. screenY;
document.write(leftPos+","+topPos);
console.log(leftPos+","+topPos);
}

1.2移動窗口,調整窗口大小

window.moveTo(0,0)
window.moveBy(20,10)
window.resizeTo(100,100);
window.resizeBy(100,100); 
注意,這幾個方法在瀏覽器中極可能會被禁用。
1.3得到瀏覽器頁面視口的大小
var pageWith=document.documentElement.clientWidth||document.body.clientWidth;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
1.4導航和打開窗口
window.open()既能夠導航到特定的URL,也能夠打開一個新的瀏覽器窗口,其接收四個參數,要加載的url,窗口目標(能夠是關鍵字_self,_parent,_top,_blank),一個特性字符串,以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。一般只須要傳遞第一個參數。
注意,在不少瀏覽器中,都是阻止彈出窗口的。
1.5定時器

setTimeout(code,millisec)
setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式。
code 必需,要調用的函數後要執行的 JavaScript 代碼串。
millisec 必需,在執行代碼前需等待的毫秒數。
clearTimeout(對象) 清除已設置的setTimeout對象

1.6系統對話框

alert():帶有一個肯定按鈕

confirm():帶有一個肯定和取消按鈕

prompt():顯示OK和Cancel按鈕以外,還會顯示一個文本輸入域

1.7 scroll系列方法

scrollHeight和scrollWidth 對象內部的實際內容的高度/寬度(不包括border)

scrollTop和scrollLeft 被捲去部分的頂部/左側 到 可視區域 頂部/左側 的距離

onscroll事件 滾動條滾動觸發的事件

2.document

write() 函數
writeln() 函數
document.open() 函數
document.close() 函數
...

3.location對象

location對象提供了當前窗口加載的文檔的相關信息,還提供了一些導航功能。事實上,這是一個很特殊的對象,location既是window對象的屬性,又是document對象的屬性。

location.hash  #contents  返回url中的hash,若是不包含#後面的內容,則返回空字符串

location.host  best.cnblogs.com:80  返回服務器名稱和端口號

location.port  80  返回端口號

location.hostname  best.cnblogs.com  返回服務器名稱

location.href  http://best.cnblogs.com  返回當前加載頁面的完整url

location.pathname  /index.html  返回url中的目錄和文件名

location.protocol http  返回頁面使用的協議

location.search  ?q=javascript  返回url中的查詢字符串

改變瀏覽器的位置:location.href=http://www.baidu.com

若是使用location.replace('http://www.baidu.com'),不會在歷史記錄中生成新紀錄,用戶不能回到前一個頁面。

location.reload():重置當前頁面,可能從緩存,也可能從服務器;若是強制從服務器取得,傳入true參數 

4.history對象

history對象保存着用戶上網的歷史記錄,使用go()實如今用戶的瀏覽記錄中跳轉:

history.go(-1) 等價於history.back()

history.go(1) 等價於 history.forward()

history.go(1) //前進兩頁

history.go('cnblogs.com')

5.navigator對象

navigator.userAgent:用戶代理字符串,用於瀏覽器監測中、

navigator.plugins:瀏覽器插件數組,用於插件監測

navigator.registerContentHandler 註冊處理程序,如提供RSS閱讀器等在線處理程序。

瀏覽器名稱    navigator.appCodeName
次版本信息    navigator.appMinorVersion
完整的瀏覽器名稱    navigator.appName
瀏覽器版本    navigator.appVersion
瀏覽器編譯版本    navigator.buildID
是否啓用cookie    navigator.cookieEnabled
客戶端計算機CPU類型    navigator.cpuClass
瀏覽器是否啓用java    navigator.javaEnabled()
瀏覽器主語言    navigator.language
瀏覽器中註冊的MIME類型數組    navigator.mimeTypes
是否鏈接到網絡    navigator.onLine
客戶端計算機操做系統或者CPU   navigator.oscpu
瀏覽器所在的系統平臺   navigator.platform
瀏覽器中插件信息數組   navigator.plugins
用戶的首選項    navigator.preference()
產品名稱    navigator.product
產品的次要信息 navigator.productSub 操做系統的語言 navigator.systemLanguage 瀏覽器的用戶代理字符串 navigator. userAgent 操做系統默認語言 navigator.userLanguage 用戶我的信息對象 navigator.userProfile 瀏覽器品牌 navigator.vendor 瀏覽器供應商次要信息 navigator.vendorSub

參考連接1
參考連接2
相關文章
相關標籤/搜索
本站公眾號
   歡迎關注本站公眾號,獲取更多信息