JavaScript瀏覽器物件

乘風而歸發表於2017-09-25
JavaScript瀏覽器物件

1.window物件

window物件是BOM的核心，window物件指當前的瀏覽器視窗。

window物件方法:
這裡寫圖片描述

注意:在JavaScript基礎篇中，已講解了部分屬性，window物件重點講解計時器。

2.JavaScript 計時器

在JavaScript中，我們可以在設定的時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行。
計時器型別：
一次性計時器：僅在指定的延遲時間之後觸發一次。
間隔性觸發計時器：每隔一定的時間間隔就觸發一次。
計時器方法：
這裡寫圖片描述

3.計時器setInterval()

在執行時,從載入頁面後每隔指定的時間執行程式碼。

語法:

setInterval(程式碼,互動時間);
引數說明：

  1. 程式碼：要呼叫的函式或要執行的程式碼串。

  2. 互動時間：週期性執行或呼叫表示式之間的時間間隔，以毫秒計（1s=1000ms）。

返回值:

一個可以傳遞給 clearInterval() 從而取消對”程式碼”的週期性執行的值。

呼叫函式格式(假設有一個clock()函式):

setInterval(“clock()”,1000)
或
setInterval(clock,1000)
我們設定一個計時器，每隔100毫秒呼叫clock()函式，並將時間顯示出來，程式碼如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
  var int=setInterval(clock, 100)
  function clock(){
    var time=new Date();
    document.getElementById("clock").value = time;
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
  </form>
</body>
</html>

4.取消計時器clearInterval()

clearInterval() 方法可取消由 setInterval() 設定的互動時間。

語法：

clearInterval(id_of_setInterval)
引數說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒呼叫 clock() 函式,並顯示時間。當點選按鈕時，停止時間,程式碼如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();                     
      document.getElementById("clock").value = time;
   }
// 每隔100毫秒呼叫clock函式，並將返回值賦值給i
     var i=setInterval("clock()",100);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"  />
  </form>
</body>
</html>

5.計時器setTimeout()

setTimeout()計時器，在載入後延遲指定時間後,去執行一次表示式,僅執行一次。

語法:

setTimeout(程式碼,延遲時間);
引數說明：

  1. 要呼叫的函式或要執行的程式碼串。
  2. 延時時間：在執行程式碼前需等待的時間，以毫秒為單位（1s=1000ms)。

當我們開啟網頁3秒後，在彈出一個提示框，程式碼如下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>

當按鈕start被點選時，setTimeout()呼叫函式，在5秒後彈出一個提示框。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
  var t=setTimeout("alert('Hello!')",5000);
 }
</script>
</head>
<body>
<form>
  <input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>

要建立一個執行於無窮迴圈中的計數器，我們需要編寫一個函式來呼叫其自身。在下面的程式碼，當按鈕被點選後，輸入域便從0開始計數。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
 document.getElementById('txt').value=num;
 num=num+1;
 setTimeout("numCount()",1000);
 }
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

6.取消計時器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止計時器。

語法:

clearTimeout(id_of_setTimeout)
引數說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行程式碼塊。

下面的例子和上節的無窮迴圈的例子相似。唯一不同是，現在我們新增了一個 “Stop” 按鈕來停止這個計數器：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i;
  function timedCount(){
    document.getElementById('txt').value=num;
    num=num+1;
    i=setTimeout(timedCount,1000);
  }
    setTimeout(timedCount,1000);
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>

7.History 物件

history物件記錄了使用者曾經瀏覽過的頁面(URL)，並可以實現瀏覽器前進與後退相似導航的功能。

注意:從視窗被開啟的那一刻開始記錄，每個瀏覽器視窗、每個標籤頁乃至每個框架，都有自己的history物件與特定的window物件關聯。

語法：

window.history.[屬性|方法]
注意：window可以省略。

History 物件屬性
這裡寫圖片描述

History 物件方法
這裡寫圖片描述

使用length屬性，當前視窗的瀏覽歷史總長度，程式碼如下：

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

8.返回前一個瀏覽的頁面

back()方法，載入 history 列表中的前一個 URL。

語法：

window.history.back();
比如，返回前一個瀏覽的頁面，程式碼如下：

window.history.back();
注意：等同於點選瀏覽器的倒退按鈕。

back()相當於go(-1),程式碼如下:

window.history.go(-1);

9.返回下一個瀏覽的頁面

forward()方法，載入 history 列表中的下一個 URL。

如果倒退之後，再想回到倒退之前瀏覽的頁面，則可以使用forward()方法,程式碼如下:

window.history.forward();
注意：等價點選前進按鈕。

forward()相當於go(1),程式碼如下:

window.history.go(1);

10.返回瀏覽歷史中的其他頁面

go()方法，根據當前所處的頁面，載入 history 列表中的某個具體的頁面。

語法：

window.history.go(number);
引數：
這裡寫圖片描述

瀏覽器中，返回當前頁面之前瀏覽過的第二個歷史頁面，程式碼如下：

window.history.go(-2);
注意：和在瀏覽器中單擊兩次後退按鈕操作一樣。

同理，返回當前頁面之後瀏覽過的第三個歷史頁面，程式碼如下：

window.history.go(3);

11.Location物件

location用於獲取或設定窗體的URL，並且可以用於解析URL。

語法:

location.[屬性|方法]
location物件屬性圖示:

這裡寫圖片描述

location 物件屬性：

這裡寫圖片描述

location 物件方法:

這裡寫圖片描述

12.Navigator物件

Navigator 物件包含有關瀏覽器的資訊，通常用於檢測瀏覽器與作業系統的版本。

物件屬性:
這裡寫圖片描述

檢視瀏覽器的名稱和版本，程式碼如下:

<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);
</script>

13.userAgent

返回使用者代理頭的字串表示(就是包括瀏覽器版本資訊等的字串)

語法

navigator.userAgent
幾種瀏覽的user_agent.，像360的相容模式用的是IE、極速模式用的是chrom的核心。
這裡寫圖片描述

使用userAgent判斷使用的是什麼瀏覽器(假設使用的是IE8瀏覽器),程式碼如下:

function validB(){ 
  var u_agent = navigator.userAgent; 
  var B_name="Failed to identify the browser"; 
  if(u_agent.indexOf("Firefox")>-1){ 
      B_name="Firefox"; 
  }else if(u_agent.indexOf("Chrome")>-1){ 
      B_name="Chrome"; 
  }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
      B_name="IE(8-10)";  
  }
    document.write("B_name:"+B_name+"<br>");
    document.write("u_agent:"+u_agent+"<br>"); 
}

執行結果:
這裡寫圖片描述

14.screen物件

screen物件用於獲取使用者的螢幕資訊。

語法：

window.screen.屬性
物件屬性:

這裡寫圖片描述

15.螢幕解析度的高和寬

window.screen 物件包含有關使用者螢幕的資訊。
1. screen.height 返回螢幕解析度的高
2. screen.width 返回螢幕解析度的寬
注意:
1.單位以畫素計。
2. window.screen 物件在編寫時可以不使用 window 這個字首。
我們來獲取螢幕的高和寬，程式碼如下:

<script type="text/javascript">
  document.write( "螢幕寬度："+screen.width+"px<br />" );
  document.write( "螢幕高度："+screen.height+"px<br />" );
</script>

16.螢幕可用高和寬度

  1. screen.availWidth 屬性返回訪問者螢幕的寬度，以畫素計，減去介面特性，比如工作列。

  2. screen.availHeight 屬性返回訪問者螢幕的高度，以畫素計，減去介面特性，比如工作列。

注意:

不同系統的工作列預設高度不一樣，及工作列的位置可在螢幕上下左右任何位置，所以有可能可用寬度和高度不一樣。

我們來獲取螢幕的可用高和寬度，程式碼如下：

<script type="text/javascript">
document.write("可用寬度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>

注意:根據螢幕的不同顯示值不同。

17.程式設計練習

製作一個跳轉提示頁面：

要求：

  1. 如果開啟該頁面後，如果不做任何操作則5秒後自動跳轉到一個新的地址，如慕課網主頁。

  2. 如果點選“返回”按鈕則返回前一個頁面。

注意: 在視窗中執行該程式時，該視窗一定要有歷史瀏覽記錄，否則”返回”無效果。

任務
第一步： 先編寫好網頁佈局，如下:
這裡寫圖片描述

第二步： 獲取顯示秒數的元素，通過定時器來更改秒數。

第三步： 通過window的location和history物件來控制網頁的跳轉。

<!DOCTYPE html>
<html>
 <head>
  <title>瀏覽器物件</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
 </head>
 <body>
  <!--先編寫好網頁佈局-->
  <h1>操作成功</h1>
<span id="second" >5</span>
  <span >秒後回到主頁</span>
  <a href="javascript:back();">返回</a>



  <script type="text/javascript">  
    var num=document.getElementById("second").innerHTML;
   //獲取顯示秒數的元素，通過定時器來更改秒數。

    function count()
    {
        num--;
        document.getElementById("second").innerHTML=num;
        if(num==0)
        {
            location.assign("http://www.imooc.com");
        }
    }
    setInterval("count()",1000);
   //通過window的location和history物件來控制網頁的跳轉。
    function back()
    {
       window.history.back();
   }

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

相關文章