JS中BOM相關知識點總結(必看篇)

更新時間：2016年11月22日 08:37:39 投稿：jingxian

下面小編就為大家?guī)硪黄狫S中BOM相關知識點總結(必看篇)。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦

window對象

ECMAScript是JavaScript的核心，但是如果要在web中使用javascript，那么BOM(瀏覽器對象模型)才是真正的核心。BOM提供了很多對象，用于訪問瀏覽器的功能，這些功能與任何網頁內容無關。

window對象：BOM的核心對象是window，它表示瀏覽器的一個實例。在瀏覽器中，window對象有雙重角色，它既是通過javascript訪問瀏覽器窗口的一個接口，又是ECMAScript規(guī)定的Global對象。

因此，所有全局作用域中聲明的變量、函數(shù)都會變成window對象的屬性和方法。

<script type="text/javascript">
  var age=26;//這里定義的全局變量和全局函數(shù)被自動歸在了window對象名下
  function sayAge(){
    console.log(this.age);
  }
  console.log(window.age);//26
  sayAge();//26 相當于window.sayAge()
  window.sayAge();//26

  //全局變量和在window對象上直接定義屬性的唯一區(qū)別：全局變量不能夠通過delete操作符刪除，而直接在window對象上定義的屬性可以
  window.color='red';
  delete window.age;
  delete window.color;
  console.log(window.age);//26
  console.log(window.color);//undefined
  </script>

<script type="text/javascript">
    /*
    還要注意：嘗試訪問未聲明的變量會拋出錯誤，但是通過查詢window對象，可以知道某個可能未經聲明的變量是否存在
     */
    //這會拋出錯誤，因為oldValue未定義
    var newValue=oldValue;
    //這不會拋出錯誤，因為是一次屬性查詢
    var newValue=window.oldValue;
  </script>

窗口關系和框架

如果頁面中包含框架，則每個框架都擁有自己的window對象，并且保存在frames集合中。在frames集合中，可以通過數(shù)值索引(從0開始，從左到右，從上到下)或者框架名稱來訪問相應的window對象。每個window對象都有一個name屬性，其中包含著框架的名稱。

可以通過window.frames[0]或者window.frames[“topFrame”]來引用上方的框架。不過，最好使用top，而不是window來引用這些框架。因為，top對象始終指向最高(最外)層的框架，也就是瀏覽器窗口。使用它可以確保在一個框架中正確地訪問另一個框架。因為對于一個在框架中編寫的任何代碼來說，其中的window對象指向的都是那個框架的特定實例，而不是最高層的框架。

與top相對的另一個window對象是parent。parent對象始終指向當前框架的直接上層框架。

與框架有關的最后一個對象是self，它始終指向window。self和window對象可以互換使用。

在使用框架的情況下，瀏覽器中會存在多個Global對象。在每個框架中定義的全局變量會自動成為框架中window對象的屬性。由于每個window對象都包含原生類型的構造函數(shù)，因此每個框架都有一套自己的構造函數(shù)，這些構造函數(shù)一一對應，但并不相等。

location對象

location對象是一個很特別的對象，因為它既是window對象的屬性，也是document對象的屬性。window.location和document.location引用的是同一個對象。

location對象的屬性：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>查詢字符串參數(shù)</title>
</head>
<body>
<script type="text/javascript">
    function getQueryStringArgs(){
      //取得查詢字符串并去掉開頭的問號
      var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
        //保存數(shù)據(jù)對象
        args = {},
        //取得每一項
        items = qs.length ? qs.split("&") : [],
        item = null,
        name = null,
        value = null,
        //在for循環(huán)中使用
        i = 0,
        len = items.length;
      //逐個將每一項添加到args對象中
      for (i=0; i < len; i++){
        item = items[i].split("=");
        //decodeURIComponent用來解碼name和value,因為查詢字符串應該是被編碼過的
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);

        if (name.length){
          args[name] = value;
        }
      }
      return args;
    }
    //假設查詢字符串是： ?q=javascript&num=10
    var args = getQueryStringArgs();
    alert(args["q"]);   //"javascript"
    alert(args["num"]);  //"10"
    //這樣一來，每個查詢字符串參數(shù)都成了返回對象的屬性，極大地方便了對每個參數(shù)的訪問
</script>
</body>
</html>

使用location對象可以通過很多方式來改變?yōu)g覽器的位置。

其中，最常用的方式是：使用assign()方法并為其傳遞一個URL

location.assign(“http://dhdzp.com“)

這樣就可以立即打開新的URL并在瀏覽器的歷史記錄中生成一條記錄。

同樣的，將location.href和window.location設置為一個URL值,也會以該值調用assign()方法。

location.href=”http://dhdzp.com”;
window.location=”http://dhdzp.com”;

這兩種方式的效果和顯示調用assign()方法效果完全一樣

此外，通過修改location對象的其他屬性也可以改變當前加載的頁面。

每次修改location的屬性(hash除外)，頁面都會以新的URL重新加載。修改hash的值會在瀏覽器的歷史記錄中生成一條新的記錄

在url：http://a.com#helloword中的'#helloworld'就是location.hash，改變hash并不會導致頁面刷新，所以可以利用hash值來進行數(shù)據(jù)傳遞，當然數(shù)據(jù)容量是有限的。

當通過上述任何一種方法修改URL之后，瀏覽器的歷史記錄中就會生成一條新紀錄，因此通過點擊”后退”按鈕都會導航到前一個頁面。

我們可以使用replace()方法來禁用這種行為。該方法只接受一個參數(shù)，即要導航到的URL;結果雖然會導致瀏覽器位置改變，但不會在歷史記錄中生成新紀錄。在調用replace()方法后，用戶不能回到前一個頁面。

這個頁面加載到瀏覽器中后，瀏覽器就會在1秒鐘后重新定向到dhdzp.com。然后，'后退'按鈕將處于禁用狀態(tài)，如果重新輸入完整的URL，則無法返回示例頁面。

<script type="text/javascript">
    setTimeout(function () {
      location.replace("http://dhdzp.com/");
    }, 1000);
  </script>

reload()方法，其作用是重新加載當前顯示的頁面。如果調用reload()方法時不傳遞任何參數(shù)，頁面就會以最有效的方式重新加載。也就是說，如果頁面自上次請求以來并沒有改變過，頁面就會從瀏覽器緩存中重新加載。如果要強制從服務器重新加載，需要給該方法傳遞參數(shù)true。

location.reload();//重新加載(有可能從緩存中加載)
location.reload(true);//重新加載(從服務器重新加載)

超時調用和間歇調用

javascript是單線程語言，但允許通過設置超時值和間歇值來設定代碼在特定時刻執(zhí)行

超時調用：是在指定的時間過后執(zhí)行代碼

間歇調用：每隔指定的時間就執(zhí)行一次代碼

超時調用：需要使用window對象的setTimeout()方法，接收兩個參數(shù)：要執(zhí)行的代碼和以毫秒表示的時間。

第二個參數(shù)是一個表示等待多長時間的毫秒數(shù)，但經過該時間后指定的代碼不一定執(zhí)行。因為，javascript是一個單線程的解釋器，因此一定時間內只能執(zhí)行一段代碼。第二個參數(shù)表示再過多長時間把當前任務添加到隊列中。如果隊列是空的，則代碼會立刻執(zhí)行，否則就要等待前面的代碼執(zhí)行完了以后再執(zhí)行。

調用setTimeout()后，該方法會返回一個數(shù)值ID,表示超時調用。要取消未執(zhí)行的超時調用計劃，可以調用clearTimeout()方法并將相應的超時調用ID作為參數(shù)傳遞給它即可。

間歇調用：使用setInterval()方法

與超時調用類似，只不過它會按照指定的時間間隔重復執(zhí)行代碼，直到間歇調用被取消或者頁面被卸載。它接收的參數(shù)與setTimeout()方法一樣

Demo1

<script type="text/javascript">
    //設置超時調用
    var timeoutId = setTimeout(function() {
      alert("Hello world!");
    }, 1000);
    //取消超時調用
    clearTimeout(timeoutId);
  </script>

Demo2

<script type="text/javascript">
  /*
  使用間歇調用實現(xiàn)
   */
    var num = 0;
    var max = 10;
    var intervalId = null;
    function incrementNumber() {
      num++;
      if (num == max) {
        clearInterval(intervalId);
        alert("Done");
      }
    }
    intervalId = setInterval(incrementNumber, 500);
  </script>

Demo3

<script type="text/javascript">
  /*
  使用超時調用來實現(xiàn)
   */
    var num = 0;
    var max = 100;
    function incrementNumber() {
      num++;
      if (num < max) {
        setTimeout(incrementNumber, 500);
      } else {
        alert("Done");
      }
    }
    setTimeout(incrementNumber, 500);
  </script>

在使用超時調用時，沒有必要跟蹤超時調用ID，因為每次執(zhí)行代碼之后，如果不再設置另一次超時調用，調用就會自動停止。一般認為，使用超時調用來模擬間歇調用是一種最佳模式。間歇調用一般較少使用，因為后一個間歇調用可能會在前一個間歇調用結束之前啟動。

系統(tǒng)對話框

alert()、confirm()和prompt()

<script type="text/javascript">
    alert("Hello world!");
  </script>



<script type="text/javascript">
  /*
  判斷用戶點擊了OK還是Cancel，可以檢查confirm()方法返回的布爾值：true表示單擊了OK，false表示單擊了Cancel或單擊了右上角的X按鈕。
   */
    if (confirm("Are you sure?")) {
      alert("I'm so glad you're sure! ");
    } else {
       alert("I'm sorry to hear you're not sure. ");
    }
  </script>



<script type="text/javascript">
  /*
  prompt()方法用來生成一個"提示"框，用于提示用戶輸入一些文本。提示框除了顯示OK和Cancel按鈕之外 ，還會顯示一個文本輸入域，用來輸入文本內容。該方法接收兩個參數(shù)：要顯示給用戶的文本提示和文本輸入域的默認值(可以是一個空字符串)
   */
    var result = prompt("What is your name? ", "");
    if (result !== null) {
     alert("Welcome, " + result);
    }
  </script>

history對象

history對象保存著用戶上網的歷史記錄，從窗口被打開的那一刻算起。因為history是window對象的屬性，因此每個瀏覽器窗口、每個標簽頁以及每個框架，都有自己的history對象與特定的window對象關聯(lián)。處于安全方面的考慮，開發(fā)人員是無法知道用戶瀏覽過的URL，不過，借助用戶訪問過的頁面列表，同樣可以在不知道實際URL的情況下實現(xiàn)后退和前進。

使用Go()方法可以在用戶的歷史記錄中任意跳轉，可以向后也可以向前。該方法接收一個參數(shù)：表示向前或者向后跳轉的頁面數(shù)的整數(shù)值。負數(shù)表示向后跳轉(類似單擊瀏覽器的后退按鈕)，正數(shù)表示向前跳轉(類似瀏覽器的前進按鈕)。

//后退一頁
    history.go(-1);
    //前進一頁
    history.go(1);

也可以給go()方法傳遞一個字符串參數(shù)，此時瀏覽器會跳轉到歷史記錄中包含該字符串的第一個位置–可能后退也可能前進，具體要看哪個位置最近。如果歷史記錄中不包含該字符串，那么這個方法什么也不做

//跳轉到最近的jb51.net
history.go("jb51.net");

另外，還可以使用back()和forward()來代替go()方法

//后退一頁
    history.back();
    //前進一頁
    history.forward();

除此之外，history對象還有一個length屬性，保存著歷史記錄的數(shù)量。這個數(shù)量包括所有的歷史記錄，即所有的向后和向前的記錄。如果history.length==0，則表示這是用戶打開窗口后的第一個頁面

history對象不常用，但是在創(chuàng)建自定義的后退和前進按鈕，以及檢測當前頁面是不是用戶歷史記錄的第一個頁面時，還是必須使用它。

Demo1

history.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>history</title>
</head>
<body>
  <form>
    <input type="text" id="username">
  </form>
  <input type="button" id="btn" value="按鈕" onclick="go()">
  <script type="text/javascript">
    function go(){
      var name=document.getElementById("username").value;
      if(name=="hello"){
        history.go(-1);
      }else{
        alert('用戶名不正確');
      }
    }
  </script>
</body>
</html>

ceshi.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
  <a href="history.html" >跳轉</a>
</body>
</html>

這里使用history模仿了一個輸入用戶名之后。跳轉到之前頁面的例子。

Demo2
history2.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>history</title>
</head>
<body>
  <a href="demo.html">跳轉</a>
  <input type="button" id="btn" value="前進" onclick="go()">
  <script type="text/javascript">
    function go(){
      history.forward();
    }
  </script>
</body>
</html>

demo.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
  <input type="button" name="" value="回退" id="btn" onclick="fn()">
  <script type="text/javascript">
    function fn(){
      history.back();
    }
  </script>
</body>
</html>

這個小例子模擬了history.back()和history.forward()的基本功能

以上就是小編為大家?guī)淼腏S中BOM相關知識點總結(必看篇)全部內容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

wap瀏覽自動跳轉到wap頁面的js代碼
這篇文章主要介紹了如何讓用戶輸入wap手機網站的網址時自動跳轉到wap網站,需要的朋友可以參考下
2014-05-05
微信小程序自定義tabBar的步驟記錄
微信小程序開發(fā)越來越多樣化,各種豐富的設計及體驗,自定義tabBar也經常使用,下面這篇文章主要給大家介紹了關于微信小程序如何自定義tabBar的相關資料,需要的朋友可以參考下
2021-08-08
jqplot通過ajax動態(tài)畫折線圖的方法及思路
這篇文章主要介紹了
2013-12-12
微信小程序Echarts覆蓋正常組件問題解決
這篇文章主要介紹了微信小程序Echarts覆蓋正常組件問題解決,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-07-07
JSONP原理及簡單實現(xiàn)
這篇文章主要介紹了JSONP原理及簡單實現(xiàn)的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
JavaScript基礎知識及常用方法總結
JAVASCRIPT是AJAX技術中不可或缺的一部分，所以想學好AJAX以及現(xiàn)在流行的AJAX框架，學好JAVASCRIPT是最重要的，通過本篇文章給大家介紹javascript基礎知識及常用方法總結，對js基礎知識及常用方法相關知識感興趣的朋友一起學習吧
2016-01-01
JS的location.href跳出框架打開新頁面的方法
登錄頁面在框架內打開，想讓它直接跳出框架打開（這里不是打開新窗口），終于在網上找到了辦法，下面分享給大家
2014-09-09
html2canvas屬性和使用方法以及如何使用html2canvas將HTML內容寫入Canvas生成圖片
為大家介紹一款JS截圖插件html2canvas.js，它可以通過純JS對瀏覽器端經行截屏,下面就為大家介紹一下html2canvas.js屬性和具體使用方法，并為大家提供了一個實例
2020-01-01
微信小程序上拉加載和下拉刷新功能實現(xiàn)
這篇文章主要介紹了微信小程序上拉加載和下拉刷新功能實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-06-06
獲得Javascript對象屬性個數(shù)的示例代碼
這篇文章主要是對獲得Javascript對象屬性個數(shù)的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11