JS中的BOM應(yīng)用
我們曾經(jīng)講過JS由三部分組成，其中一個部分就是BOM，用于對瀏覽器進行操作。這節(jié)課我們主要就來介紹BOM。
BOM基礎(chǔ)
我們先來看一個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方法用于打開一個窗口，相對的close方法用于關(guān)閉一個窗口。這里我們可以用open方法實現(xiàn)一個應(yīng)用：運行代碼。
在這之前，我們要給大家補充一個關(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)我們點擊了按鈕后，整個頁面的源碼就只剩下了“abc”——也就是說，如果document.write如果放在事件里面使用，會先將頁面完全清空再重寫。
可以看到，我們的運行代碼案例，使用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="運行" />
</body></html>
其中_blank代表新打開一個窗口（在本窗口打開用_self），about:blank代表打開的是一個空白窗口，然后我們使用document.write向新窗口寫入html，就可以在新窗口運行html代碼了。
講完open后，我們來說說close的一些問題。close的使用非常簡單，使用window.close便可以執(zhí)行關(guān)閉窗口的事件。但是在火狐瀏覽器下，是無法close一個用戶打開的窗口，只有一個窗口是用open方法打開的時候才能用close方法關(guān)閉。
講完open和close方法后，我們來說兩個常用的屬性：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ū)尺寸呢？其實就是用戶端能在屏幕上看到網(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>
效果如下：
此外針對可視區(qū)，還有一個屬性叫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 style="height:2000px;">
</body></html>
效果如下：
//這里有圖
值得注意的是document.documentElement.scrollTop僅僅在ie下兼容，在chrome下的寫法則為document.body.scrollTop，因此我們用||方法處理兼容問題。
常用方法和事件
這里我們嘗試使用除fixed以外的另一種方法實現(xiàn)元素的固定定位（fixed在ie6下不兼容）。
這里我們再畫一張圖：
可以看得出，只要我們將黑線的長度計算出來，就可以將右下方的div塊進行固定定位了。而黑線的長度正好等于可視區(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>
效果如下：
可以看到我們的div塊有輕微的抖動，因為onscroll函數(shù)一直在發(fā)生，每發(fā)生一次便會調(diào)用一次，所以會發(fā)生這種情況。此外還存在一個更嚴(yán)重的情況：如果我們改變窗口大小，div塊并不會跟著走而是保持在原地，因此我們還要用到另一個事件——
window.onresize(頁面大小改變時觸發(fā)的事件：）：
window.onscroll=window.onresize=function (){...}
最后我們來說說幾個常用的系統(tǒng)對話框：
- alert("內(nèi)容") 警告框，沒有返回值
- confirm("提問的內(nèi)容") 選擇框，會給確定或取消選項，返回一個boolean
- prompt("提示文字","默認文字") 會彈出一個可輸入的文本框，返回值為輸入的文本內(nèi)容（字符串），不輸入則為null
總結(jié)
以上所述是小編給大家介紹的JS中的BOM應(yīng)用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了微信小程序事件流原理解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
這篇文章主要給大家介紹了關(guān)于重學(xué)JS之顯示強制類型轉(zhuǎn)換的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本文主要介紹了javaScript的基礎(chǔ)知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
使用原生JS實現(xiàn)一個日期選擇器(DatePicker)組件
這篇文章主要為大家介紹了如何通過原生HTML/CSS/JavaScript完成一個日期選擇器（datepicker）組件,一個純手搓的組件的開發(fā),有需要的可以了解下2025-01-01
這篇文章主要介紹了javascript實現(xiàn)拖放效果的相關(guān)資料，需要的朋友可以參考下2015-12-12
下面小編就為大家?guī)硪黄猨s實現(xiàn)String.Fomat的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
在寫原生的Javascript的時候，因為IE的JS引擎與標(biāo)準(zhǔn)瀏覽器的JS引擎之間總有那么些差異，所以經(jīng)常會去判斷是否是IE瀏覽器2014-04-04
javascript和php使用ajax通信傳遞JSON的實例
今天小編就為大家分享一篇javascript和php使用ajax通信傳遞JSON的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript結(jié)合Canvas繪畫畫運動小球
這篇文章主要介紹了JavaScript結(jié)合Canvas畫運動小球，canvas被稱為畫布，可以結(jié)合javascript實現(xiàn)繪制各種圖形,制作各種炫酷的動畫效果，下面文章更多詳細內(nèi)容介紹需要的小伙伴可以參考一下2022-03-03![解決 FireFox 下[使用event很麻煩] 的問題.](http://img.jbzj.com/images/xgimg/bcimg9.png)
解決 FireFox 下[使用event很麻煩] 的問題....2006-08-08