JS中的BOM應(yīng)用

更新時(shí)間：2018年02月02日 10:47:53 投稿：mrr

我們?cè)?jīng)講過(guò)JS由三部分組成，其中一個(gè)部分就是BOM，用于對(duì)瀏覽器進(jìn)行操作。這篇文章我們主要來(lái)介紹BOM應(yīng)用，感興趣的朋友一起看看吧

我們?cè)?jīng)講過(guò)JS由三部分組成，其中一個(gè)部分就是BOM，用于對(duì)瀏覽器進(jìn)行操作。這節(jié)課我們主要就來(lái)介紹BOM。

BOM基礎(chǔ)

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

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

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

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

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

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

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

<html>
 <head>
  <meta charset="utf-8">
  <title>無(wú)標(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代表新打開(kāi)一個(gè)窗口（在本窗口打開(kāi)用_self），about:blank代表打開(kāi)的是一個(gè)空白窗口，然后我們使用document.write向新窗口寫(xiě)入html，就可以在新窗口運(yùn)行html代碼了。

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

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

尺寸及坐標(biāo)

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

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

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

<html>
 <head>
  <meta charset="utf-8">
  <title>無(wú)標(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>

效果如下：

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

<!DOCTYPE HTML><html>
 <head>
 <meta charset="utf-8">
 <title>無(wú)標(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 style="height:2000px;">
 </body></html>

效果如下：

//這里有圖

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

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

這里我們?cè)佼?huà)一張圖：

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

<html>
 <head>
  <meta charset="utf-8">
  <title>無(wú)標(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>

效果如下：

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

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

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

最后我們來(lái)說(shuō)說(shuō)幾個(gè)常用的系統(tǒng)對(duì)話(huà)框：

alert("內(nèi)容") 警告框，沒(méi)有返回值
confirm("提問(wèn)的內(nèi)容") 選擇框，會(huì)給確定或取消選項(xiàng)，返回一個(gè)boolean
prompt("提示文字","默認(rèn)文字") 會(huì)彈出一個(gè)可輸入的文本框，返回值為輸入的文本內(nèi)容（字符串），不輸入則為null

總結(jié)

以上所述是小編給大家介紹的JS中的BOM應(yīng)用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: