使用 Ctrl+D 可将网站添加到书签
 
当前位置：码云笔记 > 前端开发 > JavaScript浏览器对象
码云码云 前端开发

JavaScript浏览器对象

目录
文章目录隐藏
  1. window 对象
  2. JavaScript 计时器
  3. 计时器 setInterval()
  4. 取消计时器 clearInterval()
  5. 计时器 setTimeout()
  6. 取消计时器 clearTimeout()
  7. History 对象
  8. 返回前一个浏览的页面
  9. 返回下一个浏览的页面
  10. 返回浏览历史中的其他页面
  11. Location 对象
  12. Navigator 对象
  13. userAgent
  14. screen 对象
  15. 屏幕分辨率的高和宽
  16. 屏幕可用高和宽度
  17. 编程练习

本文主要介绍浏览器对象中，history,navigator,screen,location 等。

window 对象

window 对象是 BOM 的核心，window 对象指当前的浏览器窗口。

window 对象方法:

window 对象方法

注意:在 JavaScript 基础篇中，已讲解了部分属性，window 对象重点讲解计时器。

JavaScript 计时器

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

计时器类型：

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

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

计时器方法：

计时器方法

计时器 setInterval()

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码,交互时间);

参数说明：

1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

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

调用函数格式(假设有一个 clock()函数):

setInterval("clock()",1000)
或
setInterval(clock,1000)

我们设置一个计时器，每隔 100 毫秒调用 clock()函数，并将时间显示出来，代码如下:

HTML 代码：

<form>
    <input type="text" id="clock" size="50"  />
</form>

JavaScript 代码：

var int=setInterval(clock, 100)
  function clock(){
    var time=new Date();
    document.getElementById("clock").value = time;
}

取消计时器 clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

参数说明:

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

每隔 100 毫秒调用 clock()函数,并显示时间。当点击按钮时，停止时间,代码如下:

HTML 代码：

<form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"  />
</form>

JavaScript 代码：

function clock(){
      var time=new Date();                     
      document.getElementById("clock").value = time;
   }
// 每隔 100 毫秒调用 clock 函数，并将返回值赋值给 i
     var i=setInterval("clock()",100);

计时器 setTimeout()

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

语法:

setTimeout(代码,延迟时间);

参数说明：

1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

当我们打开网页 3 秒后，在弹出一个提示框，代码如下:

setTimeout("alert('Hello!')", 3000 );

当按钮 start 被点击时，setTimeout()调用函数，在 5 秒后弹出一个提示框。

HTML 代码：

<form>
  <input type="button" value="start" onClick="tinfo()">
</form>

JavaScript 代码：

function tinfo(){
  var t=setTimeout("alert('Hello!')",5000);
 }

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从 0 开始计数。

HTML 代码：

<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>

JavaScript 代码：

var num=0;
function numCount(){
 document.getElementById('txt').value=num;
 num=num+1;
 setTimeout("numCount()",1000);
 }

取消计时器 clearTimeout()

setTimeout()和 clearTimeout()一起使用，停止计时器。

语法:

clearTimeout(id_of_setTimeout)

参数说明:

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

下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个”Stop”按钮来停止这个计数器：

HTML 代码：

<form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
</form>

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

History 对象

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

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

语法：

window.history.[属性|方法]

注意：window 可以省略。

History 对象属性

History 对象属性

History 对象方法

History 对象方法

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

var HL = window.history.length;
document.write(HL);

返回前一个浏览的页面

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

语法：

window.history.back();

比如，返回前一个浏览的页面，代码如下：

window.history.back();

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

back()相当于 go(-1),代码如下:

window.history.go(-1);

返回下一个浏览的页面

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 对象属性：

location 对象属性

location 对象方法:

location 对象方法:

Navigator 对象

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

对象属性:

Navigator 对象

查看浏览器的名称和版本，代码如下:

var browser=navigator.appName;
var b_version=navigator.appVersion;
document.write("Browser name"+browser);
document.write("
");
document.write("Browser version"+b_version);

userAgent

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

语法

navigator.userAgent

几种浏览的 user_agent.，像 360 的兼容模式用的是 IE、极速模式用的是 chrom 的内核。

几种浏览的 user_agent

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

效果展示：

使用 userAgent 判断使用的是什么浏览器

screen 对象

screen 对象用于获取用户的屏幕信息。

语法：

window.screen.属性

对象属性:

screen 对象用于获取用户的屏幕信息

屏幕分辨率的高和宽

window.screen 对象包含有关用户屏幕的信息。

1.screen.height 返回屏幕分辨率的高

2.screen.width 返回屏幕分辨率的宽

注意:

1.单位以像素计。

2.window.screen 对象在编写时可以不使用 window 这个前缀。

我们来获取屏幕的高和宽，代码如下:

document.write( "屏幕宽度："+screen.width+"px<br />" );
document.write( "屏幕高度："+screen.height+"px<br />" );

屏幕可用高和宽度

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

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

注意:

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

我们来获取屏幕的可用高和宽度，代码如下：

document.write("可用宽度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);

注意:根据屏幕的不同显示值不同。

编程练习

制作一个跳转提示页面：

要求：

1. 如果打开该页面后，如果不做任何操作则 5 秒后自动跳转到一个新的地址，如码云笔记主页。

2. 如果点击“返回”按钮则返回前一个页面。

完整代码：

<!DOCTYPE html>
<html>
 <head>
  <title>浏览器对象</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>   
 </head>
 <body>
  <H4>操作成功</H4>
  <p>
     <b id="second">5</b>秒后回到主页&nbsp;<a href="javascript:goBack();">返回</a>  
  </p>
 
<script type="text/javascript">  
 
	var sec = document.getElementById("second");
	var i = 5;
	var timer = setInterval(function(){
		i--;
		sec.innerHTML = i;
		if(i==1){
			window.location.href =  "https://mybj123.com/";
		}
	},1000);
	 
  function goBack(){ 
	window.history.go(-1);
  }  
  </script> 
 </body>
</html>

注意: 在窗口中运行该程序时，该窗口一定要有历史浏览记录，否则”返回”无效果。

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
码云笔记 » JavaScript浏览器对象

码云 会员

分享到：

相关推荐

发表回复