JavaScript 浏览器对象-CSDN博客

本文链接：https://blog.csdn.net/began2009/article/details/108550204

本文详细介绍了JavaScript中的浏览器对象，包括window对象的计时器功能如setInterval和setTimeout，History对象的back()和forward()方法实现页面导航，Location对象用于获取和设置URL，Navigator对象的userAgent属性获取浏览器信息，以及screen对象提供的屏幕尺寸属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 window对象

window对象指当前的浏览器窗口。

Javascript计时器

可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。‘

计时器类型：

一次性计时器：仅在指定的延迟时间之后触发一次。

间隔性触发计时器：每隔一定的时间间隔就触发一次。

计时器setInterval()

语法：

setInterval(代码,交互时间);

代码：要调用的函数或要执行的代码串
交互时间：周期性执行或调用表达式之间的时间间隔（单位：毫秒）

返回值：

一个可以传给clearInterval()从而取消对“代码” 周期性执行的值。

调用函数格式：

setInterval("clock()", 1000);

setInterval(clock, 1000);

var int=setInterval(clock, 100);

//clock() 一个函数

取消计时器clearInterval()

语法：

clearInterval(id_of_setInterval);

id_of_setInterval：由 setInterval() 返回的 ID 值。

<script type="text/javascript">
   function clock(){
      var time=new Date();               	  
      document.getElementById("clock").value = time;//设置文本框的值
   }
     var i=setInterval("clock()",100);//每隔100毫秒调用一次clock()
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)" />//点击stop按钮后取消计时器
  </form>
</body>

计时器setTimeout()

setTimeout()计时器，在载入后延迟指定时间后，去执行一次表达式，仅执行一次。

语法：

setTimeout(代码,延迟时间);

延迟时间：在执行代码前等待的时间

例如：打开网页三秒后，弹出一个提示框

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

取消计时器clearTimeout()

语法：

clearTimeout(id_of_setTimeout);

id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

二 History对象

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

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

语法：

window.history.[属性|方法]

//window可以省略

history对象属性：

history对象方法：

返回前一个浏览的页面 back()

加载history列表中的前一个URL。

语法：

window.history.back();

history.back();

注意：等同于点击浏览器的倒退按钮。

相当于go(-1):

window.history.go(-1);

返回下一个浏览的页面 forward()

加载history列表中的下一个URL。

语法：

window.history.forward();

history.forward();

注意：等价点击前进按钮。

forward()相当于go(1):

window.history.go(1);

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

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

语法：

window.history.go(number);

参数：

例如：返回当前页面之前浏览过的第二个历史页面：

window.history.go(-2);
//和在浏览器中单击两次后退按钮操作一样。

三 Location对象

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

语法：

location.[属性|方法]

location对象属性：

方法：

四 Navigator对象

包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性：

userAgent

返回用户代理头的字符串表示（就是包括浏览器版本信息等的字符串）。

语法：

navigator.userAgent

使用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對象

用戶獲取用戶的屏幕信息。

語法：

window.screen.属性；
//window前缀可以省略

对象属性：

屏幕可用高和宽度

1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。

2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。