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