JavaScript 瀏覽器對象模型BOM原理與常見用法實例分析
本文實例講述了JavaScript 瀏覽器對象模型BOM原理與常見用法。分享給大家供大家參考,具體如下:
什么是BOM
BOM:Browser Object Model,瀏覽器對象模型
從上圖也可以看出:
- window對象是BOM的頂層(核心)對象,所有對象都是通過它延伸出來的,也可以稱為window的子對象。
- DOM是BOM的一部分。
window對象:
- window對象是JavaScript中的頂級對象。
- 全局變量、自定義函數(shù)也是window對象的屬性和方法。
- window對象下的屬性和方法調(diào)用時,可以省略window。
彈出系統(tǒng)對話框
比如說,alert(1)是window.alert(1)的簡寫,因為它是window的子方法。
系統(tǒng)對話框有三種:
alert(); //不同瀏覽器中的外觀是不一樣的 confirm(); //兼容不好 prompt(); //不推薦使用
打開窗口、關(guān)閉窗口
打開窗口
window.open(url,target)
參數(shù)解釋:
- url:要打開的地址。
- target:新窗口的位置??梢允牵篲blank 、_self、 _parent 父框架。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--行間的js中的open() window不能省略--> <button onclick="window.open('https://www.luffycity.com/')">路飛學(xué)城</button> <button>打開百度</button> <button onclick="window.close()">關(guān)閉</button> <button>關(guān)閉</button> </body> <script type="text/javascript"> var oBtn = document.getElementsByTagName('button')[1]; var closeBtn = document.getElementsByTagName('button')[3]; oBtn.onclick = function(){ //open('https://www.baidu.com') //打開空白頁面 open('about:blank',"_self") } closeBtn.onclick = function(){ if(confirm("是否關(guān)閉?")){ close(); } } </script> </html>
<body> <!--BOM使用的是window.開頭的語句--> <!--history模式和 hash模式--> <!--history模式: xxxx/#/index.html--> <!--hash模式:xxxx/index.html--> <button id="btn">跳轉(zhuǎn)</button> <script> var oBtn=document.getElementById('btn'); oBtn.onclick=function(){ console.log(location); //打開百度,下面三種方式皆可 // location.; // open('http://www.baidu.com','_self'); window.open('http://www.baidu.com','_self');//在當前頁面打開 window.location.reload();//刷新或者叫重載 } </script> </body>
location對象
window.location可以簡寫成location。location相當于瀏覽器地址欄,可以將url解析成獨立的片段。
location對象的屬性
- href:跳轉(zhuǎn)
- hash 返回url中#后面的內(nèi)容,包含#
- host 主機名,包括端口
- hostname 主機名
- pathname url中的路徑部分
- protocol 協(xié)議 一般是http、https
- search 查詢字符串
舉例:5秒后自動跳轉(zhuǎn)到百度。
有時候,當我們訪問一個不存在的網(wǎng)頁時,會提示5秒后自動跳轉(zhuǎn)到指定頁面,此時就可以用到location
<script> setTimeout(function () { location.; }, 5000); </script>
location.reload():重新加載,這個加載是 全局刷新,讓整個文檔重新解析了一遍,一般不建議使用
setTimeout(function(){ //3秒之后讓網(wǎng)頁整個刷新 window.location.reload(); },3000)
navigator對象
window.navigator 的一些屬性可以獲取客戶端的一些信息。
- userAgent:系統(tǒng),瀏覽器)
- platform:瀏覽器支持的系統(tǒng),win/mac/linux
console.log(navigator.userAgent); console.log(navigator.platform);
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript中如何對多維數(shù)組(矩陣)去重的實現(xiàn)
這篇文章主要介紹了JavaScript中如何對多維數(shù)組(矩陣)去重的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12Area 區(qū)域?qū)崿F(xiàn)post提交數(shù)據(jù)的js寫法
這篇文章主要介紹了在Area區(qū)域的里 實現(xiàn)post 提交數(shù)據(jù) 的js寫法,需要的朋友可以參考下2014-04-04統(tǒng)一接口:為FireFox添加IE的方法和屬性的js代碼
統(tǒng)一接口:為FireFox添加IE的方法和屬性的js代碼...2007-03-03談?wù)処ntersectionObserver懶加載的具體使用
這篇文章主要介紹了談?wù)処ntersectionObserver懶加載的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10解決js頁面滾動效果scrollTop在FireFox與Chrome瀏覽器間的兼容問題的方法
這篇文章為大家分享了解決js頁面滾動效果scrollTop在FireFox與Chrome瀏覽器間的兼容問題的方法,感興趣或者是遇到這種問題的朋友可以參考這篇文章2015-12-12