[JavaScript] 8.JS BOM對象

簡介

BOM是browser object model的縮寫,簡稱瀏覽器對象模型;

BOM主要用於管理窗口與窗口之間的通訊,因此其核心對象是window;

BOM由一系列相關的對象構成,並且每個對象都提供了很多方法與屬性;

瀏覽器對象模型(Browser Object Model)尚無正式標準。

結構


window對象

window對象是瀏覽器對象中其他大部分對象的共同的祖先,所以一般在JavaScript程序中可以省略window對象

常用window對象的方法

open(URL,windowName,parameterList):open方法創建一個新的瀏覽器窗口,並在新窗口中載入一個指定的URL地址

close():close方法關閉一個瀏覽器窗口

alert()等

setTimeout

Specifiesa delay for calling a function or evaluating an expression.

setInterval

Callsa function or evaluates an expression every time the specified intervalelapses.

clearTimeout

Clearsa timeout that was set with the setTimeout method.

clearInterval

Clearsa delay that was set with the setInterval method.

Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
         <head>
                   <metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
                   <title>akali-javascriptBOM</title>
                   <script>
                            vara;
                            varb;
                            functiontestSetTimeout(){
//                                  a= setTimeout(function(){      //這樣直接定義匿名函數最好!可以解決瀏覽器差異問題!
//                                           alert("3秒後執行!");
//                                  },3000);
                                    
                                    
//                                setTimeout(ttt,3000,"3","5");   //如此傳參會有瀏覽器差異問題。建議仍然使用匿名函數調用。如下:
                                     setTimeout(function(){
                                               ttt(3,4);
                                     },3300);
                            }
                           
                            functionttt(a,b){
                                     alert(a+b);
                            }
                           
                            functiontestSetInterval(){
                                     vari = 1;
                                     b= setInterval(function(){
                                               alert("第"+(i++)+"次執行");
                                     },3000);
                            }
                           
                            functiontestClearTimeout(){
                                     clearTimeout(a);
                            }
                           
                            functiontestClearInterval(){
                                     clearInterval(b);
                            }
                   </script>
         </head>
         <body>
                   <inputtype=button value=測試setTimeout οnclick="testSetTimeout();"/>
                   <inputtype=button value=取消setTimeout οnclick="testClearTimeout();"/>
                   <inputtype=button value=取消setInterval οnclick="testClearInterval();"/>
                   <inputtype=button value=測試setInterval οnclick="testSetInterval();"/>
         </body>
</html>

History對象

history含有以前訪問過的網頁的URL地址。

Demo

<html>
         <head>
                   <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
                   <title>history對象</title>
         </head>
         <body>
                   <ahref="javascript:void(0);"οnclick="javascript:history.go(-1);">後退一個</a>
                   <ahref="javascript:void(0);"οnclick="javascript:history.go(1);">前進一個</a>
         </body>
</html>

Navigator對象

使用navigator獲取瀏覽器信息//判斷瀏覽器類型

Demo

function method() {

                                     varc=window.navigator.userAgent.toLowerCase();

                                     if(c.indexOf("msie")>0){

                                               alert("您用的是微軟的ie瀏覽器");

                                     }elseif(c.indexOf("firefox")>0) {

                                               alert("您用的是火狐");

                                     }else{

                                               alert("不知道");

                                     }

                            }

 

location對象

location對象是當前網頁的URL地址。我們可以使用Location對象來讓瀏覽器打開某頁

具體的語法爲

window.location=“xxxx”

這裏的xxxx可以是一頁也可以是一個網站的IP地址。

Demo

<html>
         <head>
                   <metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
                   <title>UntitledDocument</title>
                   <scriptLanguage="JavaScript">
                            functiontestLocation() {
//                                     alert(window.location);
                                        alert(location);
                            }
                           
                            functiontestLocation1() {
                                     location="http://www.baidu.com";
                            }
                   </script>
         </head>
         <body>
                   <ahref="javascript:void(0);" οnclick="testLocation()">測試location</a>
                   <ahref="javascript:void(0);" οnclick="testLocation1()">測試location</a>
         </body>
</html>

業務思想

BOM對象的實質對象間的通信,掌握其基本屬性和方法,便可以很好地爲我們服務。關於BOM對象最爲重要的也莫過於其屬性和方法,多加練習使用,便可搖擺於其間。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章