溫馨提示×

溫馨提示×

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

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

BOM怎么在JavaScript項(xiàng)目中應(yīng)用

發(fā)布時(shí)間：2021-01-20 16:02:00 來源：億速云 閱讀：173 作者：Leah 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)BOM怎么在JavaScript項(xiàng)目中應(yīng)用，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

BOM基礎(chǔ)

我們先來看一個(gè)BOM的最基礎(chǔ)功能：打開、關(guān)閉窗口：

<html>
 <head>
  <meta charset="utf-8">
  <title>無標(biāo)題文檔</title>
 </head>
 <body>
  <input type="button" value="打開窗口" onclick="window.open('http://www.zhinengshe.com/');" />
 </body></html>

open方法用于打開一個(gè)窗口，相對的close方法用于關(guān)閉一個(gè)窗口。這里我們可以用open方法實(shí)現(xiàn)一個(gè)應(yīng)用：運(yùn)行代碼。

在這之前，我們要給大家補(bǔ)充一個(gè)關(guān)于document.write的小知識。

<!DOCTYPE HTML><html>
 <head>
  <meta charset="utf-8">
  <title>無標(biāo)題文檔</title>
 </head>
 <body>
  <input type="button" value="write" onclick="document.write('abc')" />
 </body></html>

打開源碼可以發(fā)現(xiàn)，當(dāng)我們點(diǎn)擊了按鈕后，整個(gè)頁面的源碼就只剩下了“abc”——也就是說，如果document.write如果放在事件里面使用，會先將頁面完全清空再重寫。

可以看到，我們的運(yùn)行代碼案例，使用document.write方法是非常合適的：

<html>
 <head>
  <meta charset="utf-8">
  <title>無標(biāo)題文檔</title>
  <script>
  window.onload=function ()
  {
   var oTxt=document.getElementById('txt1');
   var oBtn=document.getElementById('btn1');
  
   oBtn.onclick=function ()
   {
    var oNewWin=window.open('about:blank', '_blank');
  
    oNewWin.document.write(oTxt.value);
   };
  };
  </script>
 </head>
 <body>
  <textarea id="txt1" rows="10" cols="40"></textarea><br>
  <input id="btn1" type="button" value="運(yùn)行" />
 </body></html>

其中_blank代表新打開一個(gè)窗口（在本窗口打開用_self），about:blank代表打開的是一個(gè)空白窗口，然后我們使用document.write向新窗口寫入html，就可以在新窗口運(yùn)行html代碼了。

講完open后，我們來說說close的一些問題。close的使用非常簡單，使用window.close便可以執(zhí)行關(guān)閉窗口的事件。但是在火狐瀏覽器下，是無法close一個(gè)用戶打開的窗口，只有一個(gè)窗口是用open方法打開的時(shí)候才能用close方法關(guān)閉。

講完open和close方法后，我們來說兩個(gè)常用的屬性：window.nevigator.userAgent和window.location。前者的作用是獲取當(dāng)前瀏覽器的版本信息，后者的作用是獲取當(dāng)前網(wǎng)頁的地址（不僅可以讀取，也可以賦值，可以通過修改location跳轉(zhuǎn)當(dāng)前網(wǎng)頁的網(wǎng)址），大家可以使用一下看看返回的內(nèi)容，這里就不再列舉了。

尺寸及坐標(biāo)

這里我們討論一下JS關(guān)于尺寸和坐標(biāo)的內(nèi)容。

首先要提到的就是關(guān)于可視區(qū)尺寸的知識。什么是可視區(qū)尺寸呢？其實(shí)就是用戶端能在屏幕上看到網(wǎng)頁部分的尺寸。可視區(qū)的尺寸會隨著窗口的大小而變化。

通過document.documentElement.clientWidth和document.documentElement.clientHeight可以獲取當(dāng)前頁面可視區(qū)的寬度和高度。

<html>
 <head>
  <meta charset="utf-8">
  <title>無標(biāo)題文檔</title>
  <script>
  window.onload=function ()
  {
   var oBtn=document.getElementById('btn1');
   oBtn.onclick=function ()
   {
    alert('寬:'+document.documentElement.clientWidth+'高:'+document.documentElement.clientHeight);
   };
  };
  </script>
 </head>
 <body>
  <input id="btn1" type="button" value="可視區(qū)大小" />
 </body></html>

效果如下：

BOM怎么在JavaScript項(xiàng)目中應(yīng)用

此外針對可視區(qū)，還有一個(gè)屬性叫scrollTop，也就是滾動距離，或者說是可視區(qū)到頁面頂端的距離。

<!DOCTYPE HTML><html>
 <head>
 <meta charset="utf-8">
 <title>無標(biāo)題文檔</title>
 <script>
 document.onclick=function ()
 {
  //IE、FF
  //alert(document.documentElement.scrollTop);
 
  //chrome
  //alert(document.body.scrollTop);
 
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 
  alert(scrollTop);
 };
 </script>
 </head>
 <body >
 </body></html>

效果如下：

//這里有圖

值得注意的是document.documentElement.scrollTop僅僅在ie下兼容，在chrome下的寫法則為document.body.scrollTop，因此我們用||方法處理兼容問題。
常用方法和事件

這里我們嘗試使用除fixed以外的另一種方法實(shí)現(xiàn)元素的固定定位（fixed在ie6下不兼容）。

這里我們再畫一張圖：

BOM怎么在JavaScript項(xiàng)目中應(yīng)用

可以看得出，只要我們將黑線的長度計(jì)算出來，就可以將右下方的div塊進(jìn)行固定定位了。而黑線的長度正好等于可視區(qū)高度減去div塊的offsetHeight。

<html>
 <head>
  <meta charset="utf-8">
  <title>無標(biāo)題文檔</title>
  <style>
  #div1 {width:200px; height:150px; background:red; position:absolute; right:0; bottom:0;}
  body {height:2000px;}
  </style>
  <script>
  window.onscroll=function ()
  {
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
   var oDiv=document.getElementById('div1');  oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
  };
  </script>
 </head>
 <body>
 <div id="div1"></div>
 </body></html>

效果如下：

BOM怎么在JavaScript項(xiàng)目中應(yīng)用

可以看到我們的div塊有輕微的抖動，因?yàn)閛nscroll函數(shù)一直在發(fā)生，每發(fā)生一次便會調(diào)用一次，所以會發(fā)生這種情況。此外還存在一個(gè)更嚴(yán)重的情況：如果我們改變窗口大小，div塊并不會跟著走而是保持在原地，因此我們還要用到另一個(gè)事件——

window.onresize(頁面大小改變時(shí)觸發(fā)的事件：）：

window.onscroll=window.onresize=function (){...}

最后我們來說說幾個(gè)常用的系統(tǒng)對話框：

  • alert("內(nèi)容") 警告框，沒有返回值

  • confirm("提問的內(nèi)容") 選擇框，會給確定或取消選項(xiàng)，返回一個(gè)boolean

  • prompt("提示文字","默認(rèn)文字") 會彈出一個(gè)可輸入的文本框，返回值為輸入的文本內(nèi)容（字符串），不輸入則為null

關(guān)于BOM怎么在JavaScript項(xiàng)目中應(yīng)用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

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

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

AI
助
手