浏览器对象（后续1）_无法获得主键,因此无法进行后续操作!-CSDN博客

本文链接：https://blog.csdn.net/weixin_44451594/article/details/90754455

History 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

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

History 对象属性
在这里插入图片描述
History 对象方法

使用length属性，当前窗口的浏览历史总长度，代码如下：

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

返回前一个浏览的页面

back()方法，加载 history 列表中的前一个 URL。

语法：

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

实例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
        function GoForward() {
        window.history.forward();    
        }
</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="GoForward()" />        
    </form>
</body>
</html>

返回浏览历史中的其他页面

go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。

语法：

window.history.go(number);

参数：
在这里插入图片描述

浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下：

window.history.go(-2);

注意：和在浏览器中单击两次后退按钮操作一样。

同理，返回当前页面之后浏览过的第三个历史页面，代码如下：

window.history.go(3);

实例:

<!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();   
        }

        function GoForward() {
         window.history.forward();   
        }
    </script>

<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();" />
       <input type="button"  value="返回下一个页面" onclick="GoForward();" /> 
    </form>
</body>
</html>

结果：
点击下面的锚点链接，添加历史列表项:
第一个锚点
第二个锚点
使用下面按钮，实现返回前或下一个页面:
返回前一个页面　　返回下一个页面

Location对象

location用于获取或设置窗体的URL，并且可以用于解析URL。

语法:

location.[属性|方法]

location对象属性图示:
在这里插入图片描述
实例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>location</title>
</head>
 <script type="text/javascript">
 function currenturl()
{
    alert(window.location);
}
</script>
</head>
<body>
<input type="button" onClick=currenturl() value=" 点击获取当前显示文档的URL,并输出">
</body>
</html>

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;//appName返回浏览器的名称
  var version = navigator.appVersion;//appVersion返回浏览器的平台和版本信息
  var appCode = navigator.appCodeName;//appCodeName浏览器代码的字符表示
  var platSys = navigator.platform;//platdorm返回运行浏览器的操作系统平台
  var usersAg = navigator.userAgent;//返回由客户机发送服务器的user-agent 头部的值
  document.write("浏览器名称："+browser+"<br />"+"平台和版本信息："+version+"<br />"+"浏览器代码名称字符："+appCode+"<br />"+"浏览器操作系统平台："+platSys+"<br />"+"服务器头部的值："+usersAg)
</script>
<body>
</body>
</html>

结果 --------浏览器名称：Netscape
平台和版本信息：5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3563.0 Safari/537.36
浏览器代码名称字符：Mozilla
浏览器操作系统平台：Win32
服务器头部的值：Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3563.0 Safari/537.36