天天看點
傳回

JavaScript之BOM基礎

BOM(Browser Object Model)也叫浏覽器對象，它提供了很多對象，用于通路浏覽器的功能。但是BOM是沒有标準的，每一個浏覽器廠家會根據自己的需求來擴充BOM對象。本文主要以一些簡單的小例子，簡述前端開發中BOM的相關基礎知識，僅供學習分享使用，如有不足之處，還請指正。

概述

window對象是最頂層的對象，旗下還有6大屬性，也都是對象。document對象下也有5大屬性，同樣都是對象。window的屬性和方法，可以采用：window.屬性，或 window.方法()進行調用，或者直接調用。BOM結構圖，如下所示：

JavaScript之BOM基礎

window對話框

window提供的預設對話共三種：系統對話框（alert），選擇對話框（confirm），輸入對話框（prompt），如下所示：

//系統對話框
alert('Hello world!!!'); //彈出一個對話框，隻有一個确定按鈕，沒有傳回值。
//選擇對話框，有兩個按鈕，确定和取消。本身可以傳回bool類型的結果，如果确定，傳回true，否則傳回false
document.writeln( confirm('Are you sure ?'));//點确定，輸出true ；取消，輸出：false
//輸入框，需要使用者輸入值，輸入的資料類型不限
document.writeln(prompt('Plese input a value:','0'));//點确定：傳回輸入的值；點取消，傳回null。

打開視窗

通過調用window.open方法，打開新的視窗。open方法共3個參數：1、新視窗的URL 2、視窗名稱或目标 3、設定視窗屬性 。如下所示：

window.open('http://www.baidu.com'); //打開新視窗
window.open('http://www.baidu.com','baidu');//新打開視窗的名稱，凡是打開相同名稱的視窗，則會原有視窗中重新加載。
window.open('http://www.baidu.com','_black');//在新視窗中打開并加載,也是隻會打開一個
window.open('http://www.baidu.com','_parent');//在本視窗中加載

第三個參數，是視窗的一些特征，如寬，高，坐标，等。用逗号隔開。如下所示：

var box=window.open('http://wwww.baidu.com','baidu','width=400,height=400,top=100,left=100,location=yes');
document.writeln(box);//輸出：[object Window] 即，open預設傳回子視窗的window對象。
box.alert('show!!!');//由于跨域，則預設浏覽器拒絕通路
var box=window.open('index.html','baidu','width=400,height=400,top=100,left=100,location=yes');
box.alert('show!!!');//不跨域，則可以通路
window.opener.document.writeln('通路父視窗');//通過window.opener通路父視窗

open方法預設傳回新視窗的window對象，可以通過傳回值來通路子視窗内容。

視窗的位置

用于擷取和設定視窗的位置（左上角的起始坐标），主要通過screenLeft、screenTop和screenX、screenY來通路，如下所示：

document.writeln(window.screenLeft);//左邊坐标，此屬性firefox不支援
document.writeln(window.screenTop);//上邊坐标，此屬性firefox不支援
document.writeln(window.screenX);//左邊坐标，此屬性firefox支援,IE9以上也支援
document.writeln(window.screenY);//上邊坐标，此屬性firefox支援,IE9以上也支援

以上屬性有的浏覽器不支援，可以判斷傳回值是否是number類型來區分，如下所示：

var left=typeof window.screenLeft=='number'?window.screenLeft:window.screenX;
var top=typeof window.screenTop=='number'?window.screenTop:window.screenY;
document.writeln('left='+left+',top='+top);//輸出：left=0,top=109

視窗大小

視窗的大小，主要通過innerWidth、innderHeight和outerWidth、outerHeight來設定和擷取。如下所示：

document.writeln(window.innerWidth);//,IE9以上也支援 内視窗顯示區大小
document.writeln(window.innerHeight);//,IE9以上也支援 内視窗顯示區大小
document.writeln(window.outerWidth);//,IE9以上也支援 ，外視窗整體大小，包含工具欄和邊框
document.writeln(window.outerHeight);//,IE9以上也支援，外視窗整體大小，包含工具欄和邊框
document.writeln(document.documentElement.clientWidth);//擷取document的寬度 和innderWidth效果一樣            
document.writeln(document.documentElement.clientHeight);//擷取document的高度 和innderHeight效果一樣

如何跨浏覽器擷取視窗大小，可以通過document.compatMode判斷浏覽器的模式，如下所示：

var width=window.innerWidth;
var height=window.innerHeight;
if(typeof width !='number'){
    if(document.compatMode=='CSS1Compat'){
        //如果就标準模式
        width=document.documentElement.clientWidth;
        height=document.documentElement.clientHeight;
    }else{
        width=document.body.clientWidth;
        height=document.body.clientHeight
    }
}
document.writeln('width='+width+',height='+height);//輸出：width=1366,height=620

視窗的移動和重置大小

通過moveTo、moveBy和resizeTo、resizeBy來設定視窗的大小和移動位置，如下所示：

window.moveTo(100,100);//移動到某個位置，目前都不支援，不起作用
window.moveBy(10,10);//每次重新整理移動多少位置，目前都不支援，不起作用
window.resizeTo(300,300);//調整視窗大小，第一次打開起作用，後面再重新整理不起作用
window.resizeBy(10,10);//重新設定視窗的大小，目前不起作用

window定時器

window的定時器一共有兩種：1、逾時操作（setTimeOut） 2、間歇操作（setTimeInterval）。

逾時操作：第一個參數：可以執行的代碼塊字元串，第二個參數：逾時時間，機關毫秒。如下所示：

//逾時操作：第一個參數：可以執行的代碼塊字元串，第二個參數：逾時時間，機關毫秒
setTimeout('alert("hello js!!!")',2000);
//但是不建議上述寫法：不容易擴充，容易出錯。可以采用如下方法：
function box(){
    alert('hello js !!!');
}
setTimeout(box,2000);

但是上述方法就分開的，不是一個整體，推薦采用如下方式優化：

var box= setTimeout(function() {
    alert('hello js !!!');
}, 2000);//推薦寫法：擴充性好，封裝性也好
//box表示逾時執行的id
document.writeln(box);
clearTimeout(box);//可以取消逾時調用執行計劃

備注：逾時操作通過clearTimeout來取消操作，參數為逾時操作傳回的id。

間歇調用，可以重複執行,定時執行，如下所示：間隔200毫秒，輸出1到5。

var num=0;
var max=5;
function bb(){
    num++;
    //document.writeln(num);//不可以用wirteln
    document.getElementById('A01').innerText=num;
    if(num==max){
        clearInterval(box);
    }
}
var box = setInterval(bb,200);

上述例子，也可以通過逾時調用，模拟間歇調用，如下所示：

var num=0;
var max=5;
var box=0;
function bb(){
    num++;
    //document.writeln(num);//不可以用wirteln
    document.getElementById('A01').innerText=num;
    if(num==max){
        clearTimeout(box);
    }else{
        box=setTimeout(bb,200);
    }
}
box = setTimeout(bb,200);

location對象

javascript中location位址對象描述的是某一個視窗對象所打開的位址。如下所示：

document.writeln(window.location);//傳回目前的路徑
document.writeln(document.location);//傳回目前的路徑
window.location.hash="#66";//設定錨點，會跳轉到新的頁面，#可以不帶，會預設帶上
document.writeln(window.location.hash);//傳回路徑的錨點，#66
//端口
document.writeln(window.location.port);//傳回目前通路的路徑的端口
window.location.port=8888;//如果設定端口，則會跳轉到對應的端口
document.writeln(window.location.search);//傳回路徑中？後面的資訊，如：?__hbt=1581605601724
window.location.assign('http://www.baidu.com');//可以實作跳轉到指定的url功能
window.location.href='http://www.baidu.com'; //同樣可以跳轉

重新加載，通過reload來實作，如下所示：

window.location.reload();//進行重新加載，可能是從緩存中加載
window.location.reload(true);//強制從背景加載
window.location.replace('http://www.baidu.com');//在目前頁面替換目前url到新的url并重新加載的方法

history對象

主要用于通路曆史記錄，如：前進、後退、跳轉等，如下所示：

document.writeln(window.history.length);//傳回曆史記錄的屬性
window.history.back();//往後退
window.history.forward();//前進
window.history.go(-1);//跳轉到指定的頁數，負數往後退，正數往前進

navigator對象

navigator對象包含通路者用戶端的相關資訊，且navigator對象的執行個體的唯一的，如下所示：

document.writeln(window.navigator.appName);//完整浏覽器名稱，IE輸出：Netscape ,不能精确的輸出浏覽器
document.writeln(window.navigator.userAgent);
//http頭代理名稱，IE輸出：Netscape Mozilla/5.0 (Windows NT 6.1; Win64; x64; Trident/7.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko            
document.writeln(window.navigator.platform);//浏覽器作業系統的平台，輸出：Win64            
//插件清單
document.writeln(window.navigator.plugins.length);//插件個數

通過navigator對象輸出浏覽器的插件資訊，如下所示：

for(var i=0;i<window.navigator.plugins.length;i++){
    document.writeln('插件名稱：'+window.navigator.plugins[i].name);
    document.writeln('插件檔案名：'+window.navigator.plugins[i].filename);
    document.writeln('插件描述：'+window.navigator.plugins[i].description);
    document.writeln('插件版本'+window.navigator.plugins[i].version);
    document.writeln('<br />');
}

浏覽器支援的MIME類型，如下所示：

document.writeln(window.navigator.mimeTypes.length);//4
for(var i=0;i<window.navigator.mimeTypes.length;i++){
    document.writeln(' mime名稱：'+window.navigator.mimeTypes[i].type);
    document.writeln(' mime描述：'+window.navigator.mimeTypes[i].description);
    document.writeln(' mime字尾：'+window.navigator.mimeTypes[i].suffixes);
    document.writeln('<br />');
}

備注

至于其他浏覽器對象，用到的不是很多，暫不介紹。

生命賦予了我們靈魂，卻沒有教會我們如何走，關于情感的路，需要的是兩個人風雨同舟。

JavaScript基礎 javascript html5 html bom 前端
上一篇: JavaScript(7)-BOM一、BOM簡介二、window 對象的主要屬性三、window 對象的主要方法四、window 對象的主要子對象五、計時事件
下一篇: 總結工廠模式---簡單工廠、工廠方法、抽象工廠

繼續閱讀