溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript 瀏覽器對(duì)象模型BOM原理與常見用法實(shí)例分析

發(fā)布時(shí)間：2020-09-08 12:29:40 來(lái)源：腳本之家 閱讀：224 作者：dawn-liu 欄目：web開發(fā)

本文實(shí)例講述了JavaScript 瀏覽器對(duì)象模型BOM原理與常見用法。分享給大家供大家參考，具體如下：

什么是BOM

BOM：Browser Object Model，瀏覽器對(duì)象模型

JavaScript 瀏覽器對(duì)象模型BOM原理與常見用法實(shí)例分析

從上圖也可以看出：

  • window對(duì)象是BOM的頂層(核心)對(duì)象，所有對(duì)象都是通過它延伸出來(lái)的，也可以稱為window的子對(duì)象。
  • DOM是BOM的一部分。

window對(duì)象：

  • window對(duì)象是JavaScript中的頂級(jí)對(duì)象。
  • 全局變量、自定義函數(shù)也是window對(duì)象的屬性和方法。
  • window對(duì)象下的屬性和方法調(diào)用時(shí)，可以省略window。

彈出系統(tǒng)對(duì)話框

比如說(shuō)，alert(1)是window.alert(1)的簡(jiǎn)寫，因?yàn)樗莣indow的子方法。

系統(tǒng)對(duì)話框有三種：

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')
   //打開空白頁(yè)面
   open('about:blank',"_self")
  }
  closeBtn.onclick = function(){
   if(confirm("是否關(guān)閉？")){
    close();
   }
  }
 </script>
</html>
<body>
<!--BOM使用的是window.開頭的語(yǔ)句-->
<!--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');//在當(dāng)前頁(yè)面打開
  window.location.reload();//刷新或者叫重載
 }
</script>
</body>

location對(duì)象

window.location可以簡(jiǎn)寫成location。location相當(dāng)于瀏覽器地址欄，可以將url解析成獨(dú)立的片段。

location對(duì)象的屬性

  • href：跳轉(zhuǎn)
  • hash 返回url中#后面的內(nèi)容，包含#
  • host 主機(jī)名，包括端口
  • hostname 主機(jī)名
  • pathname url中的路徑部分
  • protocol 協(xié)議 一般是http、https
  • search 查詢字符串

舉例：5秒后自動(dòng)跳轉(zhuǎn)到百度。

有時(shí)候，當(dāng)我們?cè)L問一個(gè)不存在的網(wǎng)頁(yè)時(shí)，會(huì)提示5秒后自動(dòng)跳轉(zhuǎn)到指定頁(yè)面，此時(shí)就可以用到location

<script>
 setTimeout(function () {
  location.;
 }, 5000);
</script>

location.reload():重新加載,這個(gè)加載是  全局刷新，讓整個(gè)文檔重新解析了一遍，一般不建議使用

setTimeout(function(){
   //3秒之后讓網(wǎng)頁(yè)整個(gè)刷新
 window.location.reload();  
},3000)

navigator對(duì)象

window.navigator 的一些屬性可以獲取客戶端的一些信息。

  • userAgent：系統(tǒng)，瀏覽器)
  • platform：瀏覽器支持的系統(tǒng)，win/mac/linux
console.log(navigator.userAgent);
console.log(navigator.platform);

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手