瀏覽器history對象

時間 2019-11-30

原文原文鏈接

History 對象

history對象記錄了用戶曾經瀏覽過的頁面(URL)，並能夠實現瀏覽器前進與後退類似導航的功能。javascript

注意:從窗口被打開的那一刻開始記錄，每一個瀏覽器窗口、每一個標籤頁乃至每一個框架，都有本身的history對象與特定的window對象關聯。html

語法：java

window.history.[屬性|方法]

注意：window能夠省略。瀏覽器

History 對象屬性app

History 對象方法框架

使用length屬性，當前窗口的瀏覽歷史總長度，代碼以下：ide

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

返回前一個瀏覽的頁面

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

語法：spa

window.history.back();

好比，返回前一個瀏覽的頁面，代碼以下：操作系統

window.history.back();

注意：等同於點擊瀏覽器的倒退按鈕。

back()至關於go(-1),代碼以下:

window.history.go(-1);

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
</head>
 <script type="text/javascript">
        function GoBack() {
            window.history.back();
        }
       
    </script>
</head>
<body>
點擊下面的錨點連接，添加歷史列表項:
    
    <br />
    <a href="#target1">第一個錨點</a>
    <a name="target1"></a>
    <br />
    <a href="#target2">第二個錨點</a>
    <a name="target2"></a>
    <br /><br />
    使用下面按鈕，實現返回前一個頁面:
    <form>
       <input type="button"  value="返回前一個頁面" onclick="GoBack();" />        
    </form>
</body>
</html>

返回下一個瀏覽的頁面

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

若是倒退以後，再想回到倒退以前瀏覽的頁面，則可使用forward()方法,代碼以下:

window.history.forward();

注意：等價點擊前進按鈕。

forward()至關於go(1),代碼以下:

window.history.go(1);

返回瀏覽歷史中的其餘頁面

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

語法：

window.history.go(number);

參數：

瀏覽器中，返回當前頁面以前瀏覽過的第二個歷史頁面，代碼以下：

window.history.go(-2);

注意：和在瀏覽器中單擊兩次後退按鈕操做同樣。

同理，返回當前頁面以後瀏覽過的第三個歷史頁面，代碼以下：

window.history.go(3);

Location對象

location用於獲取或設置窗體的URL，而且能夠用於解析URL。

語法:

location.[屬性|方法]

location對象屬性圖示:

location 對象屬性：

location 對象方法:

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>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
</head>
<script type="text/javascript">
  var browser=navigator.appName;
  var b_version=navigator.appVersion;
  var b_platform=navigator.platform;
  var b_appCodeName=navigator.appCodeName;
  var b_userAgent=navigator.userAgent;
  
  document.write("Browser name :"+browser+"<br />");
   document.write("Browser version :"+b_version+"<br />");
    document.write("Browser platform :"+b_platform+"<br />");
     document.write("Browser appCodeName :"+b_appCodeName+"<br />");
      document.write("Browser userAgent :"+b_userAgent+"<br />");
</script>
<body>
</body>
</html>

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>"); 
}

screen對象

screen對象用於獲取用戶的屏幕信息。

語法：

window.screen.屬性

對象屬性:

屏幕分辨率的高和寬

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>

屏幕可用高和寬度

1. screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，好比任務欄。

2. screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，好比任務欄。

注意:

不一樣系統的任務欄默認高度不同，及任務欄的位置可在屏幕上下左右任何位置，因此有可能可用寬度和高度不同。

咱們來獲取屏幕的可用高和寬度，代碼以下：

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

注意:根據屏幕的不一樣顯示值不一樣。

屏幕可用高和寬度

1. screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，好比任務欄。

2. screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，好比任務欄。

注意:

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

注意:根據屏幕的不一樣顯示值不一樣。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。