JavaScript -- BOM

時間 2019-11-13

標籤 javascript bom 欄目 JavaScript 简体版

原文原文鏈接

什麼是BOM

BOM（browser object model）瀏覽器對象模型html

window

window是瀏覽器的一個實例，在瀏覽器中，window對象有雙重角色，它既是經過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象。
Window對象的方法windows

語法：window.alert（」content」）瀏覽器

功能：顯示帶有一段消息和一個確認按鈕的警告框緩存

語法：window.confirm(「message")服務器

功能：顯示一個帶有指定消息和OK及取消按鈕的對話框iphone

返回值：若是用戶點擊肯定按鈕，則confirm（）返回true函數

若是用戶點擊取消按鈕，則confirm（）返回falsethis

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <span>iphone6s</span>
        <input type="button" value="刪除" id="btn">
    </div>
    <script>
       var age=15;
       function sayAge(){
             alert('我'+window.age);
       }
       // 聲明一個全局變量
       window.username="marry";   // var username="marry";
       // 聲明一個全局方法
       window.sayName=function(){
             alert("我是"+this.username);
       };

       // confirm()
       // 獲取按鈕,綁定事件
       var btn=document.getElementById("btn");
       btn.onclick=function(){
              // 彈出確認對話框
              var result=window.confirm("您肯定要刪除嗎？刪除以後該信息\n將不可恢復！");
              if(result){
              document.getElementById("box").style.display="none";
              }
       }
    </script>
</body>
</html>

prompt

語法：window.prompt(「text,defaultText")url

參數說明：spa

text：要在對話框中顯示的純文本（而不是HTML格式的文本）

defaultText：默認的輸入文本

返回值：若是用戶單擊提示框的取消按鈕，則返回null

若是用戶單擊確認按鈕，則返回輸入字段當前顯示的文本

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <script>

       // 彈出輸入框
       var message=prompt("請輸入您的星座","天蠍座");
       console.log(message);
    </script>
</body>
</html>

語法：window.open(pageURL,name,parameters)

功能：打開一個新的瀏覽器窗口或查找一個已命名的窗口

參數說明：

pageURL：子窗口路徑

name：子窗口句柄。

parameters ：窗口參數(各參數用逗號分隔)

語法：window.close( )

功能：關閉瀏覽器窗口

超時調用

語法：setTimeout（code,millisec）

功能：在指定的毫秒數後調用函數或計算表達式

參數說明：

一、code：要調用的函數或要執行的JavaScript代碼串

二、millisec：在執行代碼前需等待的毫秒數

說明：setTimeout（）只執行code一次。若是要屢次調用，請使用

setInterval（）或者讓code自身再次調用setTimeout（）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
       //setTimeout("alert('hello')",4000);
       var fnCall=function(){
             alert("world");
       };
       var timeout1=setTimeout(function(){
          alert("hello");
       },2000);

       setTimeout(fnCall,5000);
    </script>
</body>
</html>

清除超時調用

語法：clearTimeout（id_of_settimeout）

功能：取消由setTimeout（）方法設置的timeout

參數說明：

一、 id_of_settimeout ：由setTimeout（）返回的ID值，該值標識要取消的延遲執行代碼塊

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>

       var timeout1=setTimeout(function(){
          alert("hello");
       },2000);

       clearTimeout(timeout1);


    </script>
</body>
</html>

間歇調用

語法：setInterval(code,millisec)

功能：每隔指定的時間執行一次代碼

參數說明：

一、code：要調用的函數或要執行的代碼串。

二、millisec：週期性執行或調用code之間的時間間隔，以毫秒計

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
       var intervalId=setInterval(function(){
           console.log("您好");
        },1000);

        // 10秒以後中止打印
        setTimeout(function(){
            clearInterval(intervalId);
        },10000);
        
    </script>
</body>
</html>

小練習，每隔1s打印一次，一直打印到10

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>

        var num=1,
            max=10,
            timer=null;

       // 每隔1秒針num遞增一次，直到num的值等於max清除
      timer=setInterval(function(){
           console.log(num);
           num++;
           if(num>max){
              clearInterval(timer);
           }
       },1000);

    
    </script>
</body>
</html>

使用超時調用實現

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>

        var num=1,
            max=10,
            timer=null;

       // 使用超時調用實現
       function inCreamentNum(){
           console.log(num);   // 1 2 3 10
           num++;
           if(num<=max){
              setTimeout(inCreamentNum,1000);
           }else{
                 clearTimeout(timer);
           }
       }
       timer=setTimeout(inCreamentNum,1000);
    </script>
</body>
</html>

發送驗證碼實例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .main{
          padding:20px;
      }
      .btn{
          width:120px;
          height:25px;
          line-height:25px;
          text-align:center;
          border-radius:6px;
          background:#FF9A00;
          font-size:14px;
          cursor:pointer;
      }
    </style>
    <script>
       window.onload=function(){
             // 獲取按鈕
             var btn=document.getElementById("btn"),
                 time=10,
                 timer=null;
             // 綁定事件
             btn.onclick=function(){
              // 判斷按鈕上是否有data-flag的屬性，若是沒有，則開啓定時器
              if(!this.getAttribute("data-flag")){
                 // 執行間歇調用
                 timer=setInterval(function(){
                    time--;
                    if(time<=0){
                       clearInterval(timer);
                       time=10;
                       btn.innerHTML='發送驗證碼';
                       btn.setAttribute("data-flag","");
                    }else{
                       btn.innerHTML=time+'秒後重試';
                       // 給btn定義一個data-flag的屬性，值爲真
                       btn.setAttribute("data-flag","flag");
                    }
                 },1000)
              }
             }
       }
    </script>
</head>
<body>
    <div class="main">
        <p class="btn" id="btn">發送驗證碼</p>
    </div>
</body>
</html>

location對象

location對象提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航的功能，它既是window對象的屬性，也是document對象的屬性。

語法：location.href

功能：返回當前加載頁面的完整URL

說明： location.href與window.location.href等價

語法：location.hash

功能：返回URL中的hash（#號後跟零或多個字符），若是不包含則返回空字符串。

語法：location.host

功能：返回服務器名稱和端口號（若是有）

語法：location.hostname

功能：返回不帶端口號的服務器名稱。

語法：location.pathname

功能：返回URL中的目錄和（或）文件名。

語法：location.port

功能：返回URL中指定的端口號，若是沒有，返回空字符串。

語法：location.protocol

功能：返回頁面使用的協議。

語法：location.search

功能：返回URL的查詢字符串。這個字符串以問號開頭。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .box1{height:400px;background:#ccc;}
       .box2{height:600px;background:#666;}
    </style>
</head>
<body>
    <div class="box1" id="top"></div>
    <div class="box2"></div>
    <input type="button" id="btn" value="返回頂部">
    <script>
       //console.log(location.href);
       //console.log(location.hash);
       var btn=document.getElementById("btn");
       btn.onclick=function(){
          location.hash="#top";
       };
       console.log(location.pathname);
    </script>
</body>
</html>

改變瀏覽器位置的方法：

location.href屬性

location對象其餘屬性也可改變URL：

location.hash

location.search

語法：location.replace(url)

功能：從新定向URL。

說明：使用location.replace不會在歷史記錄中生成新紀錄。

語法：location.reload()

功能：從新加載當前顯示的頁面。

說明：

• location.reload()有可能從緩存中加載

• location.reload(true)從服務器從新加載

history歷史對象

語法：history.back()

功能：回到歷史記錄的上一步

說明：至關於使用了history.go(-1)

語法：history.forward()

功能：回到歷史記錄的下一步

說明：至關於使用了history.go(1)

語法：history.go(-n)

功能：回到歷史記錄的前n步

語法：history.go(n)

功能：回到歷史記錄的後n步

Navigator

UserAgent：用來識別瀏覽器名稱、版本、引擎以及操做系統等信息的內容。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigator</title>
</head>
<body>
    <script>
       //console.log(navigator.userAgent);
       // 判斷瀏覽器
       function getBrowser(){
           var explorer = navigator.userAgent,browser;
           if(explorer.indexOf("MSIE")>-1){
              browser = "IE";
           }else if(explorer.indexOf("Chrome")>-1){
              browser = "Chrome";
           }else if(explorer.indexOf("Opera")>-1){
              browser = "Opera";
           }else if(explorer.indexOf("Safari")>-1){
              browser = "Safari";
           }
           return browser;
       }
       var browser = getBrowser();
       console.log("您當前使用的瀏覽器是："+browser);
       // 判斷終端
       function isPc(){
          var userAgentInfo = navigator.userAgent,
              Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
              flag = true,i;
              console.log(userAgentInfo);
           for(i=0;i<Agents.length;i++){
              if(userAgentInfo.indexOf(Agents[i])>-1){
                 flag = false;
                 break;
              }
           }
           return flag;
       }
       var isPcs = isPc();
       console.log(isPcs);
    </script>
</body>
</html>