四、JS 进阶--浏览器对象

7、浏览器对象

7.1、window 对象

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

window 对象方法：

image

7.2、JS 计时器

在 JS 中，我们可以设定计时器后来执行代码，而不是函数被调用时立即执行

计时器类型：

• 一次性计时器：仅在指定的延迟时间后触发一次
• 间隔性触发计时器：每隔一定时间间隔触发一次

计时器方法：

• setTimeout（）：指定延迟时间后来执行代码
• clearTimeout（）：取消 setTimeout （）设置
• setInterval（）：每隔指定的时间执行代码
• clearInterval（）：取消 setInterval（）设置

7.2.1、计时器 setInterval（）

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

语法：

setInterval(代码,交互时间);

• 代码：要调用的函数或要执行的代码串
• 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s = 1000ms）

返回值：

一个可以传递给 clearInterval（）从而取消对“代码”的周期性执行的值

调用函数格式：

// 假设有一个 clock() 函数,每隔 1 s 调用这个函数一次
setInterval('clock()',1000)
或
setInterval(clock,1000)

---

实例：

以时:分:秒 的格式动态显示时间

7.2.2、取消计时器 clearInterval（）

clearInterval（）方法可以取消 由 setInterval（）设置的交互时间

语法：

clearInterval(id_of_setInterval);     // id_of_setInterval 是由 setInterval() 返回的 ID 值

实例：

设置一个函数，每隔 100 ms 实时显示当前时间，当点击 按钮时，停止时间

7.2.3、计时器 setTimeout（）

在载入后延迟指定时间去执行一次表达式，仅执行一次

语法：

setTimeout(代码，延迟时间);

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

---

实例一：
打开网页3s后，弹出个提示框

实例二：

创建一个无穷循环的计数器，编写一个函数调用自身，当点击 start 按钮时，输入域便从 0 开始计数

7.2.4、取消计时器 clearTimeout（）

setTimeout（）与 clearTimeout（）一起使用

语法：

clearTimeout(id_of_setTimeout);

实例：

创建一个无穷循环的计数器，点击 start 时开始，点击 stop 时结束

7.3、History 对象

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

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

语法：

window.history.[属性 | 方法];

history 对象属性：

• length：返回浏览器历史记录列表中的 URL 数量

history 对象方法：

• back（）：加载 history 列表中的前一个 URL
• forward（）：加载 history 列表中的下一个 URL
• go（）：加载 history 列表中的某个具体页面

---

实例：

返回当前窗口的浏览历史总长度

7.3.1、返回前一个浏览的页面

back（）方法，加载 history 列表中的前一个 URL

语法：

window.history.back();   // 等同于点击浏览器的倒退按钮
// 相当于
window.history.go(-1);

语法：

利用 HTML 的 a 标签内链接（name 属性），当点击链接时链接到相应锚点，点击函数 Goback（）返回前一个记录

点击下面的锚点链接，添加历史列表项:    
    

    

        第1个锚点
        

        第2个锚点
        

        第3个锚点
        

        第4个锚点
        

        第5个锚点
        

        第6个锚点
    
    
    
章节1
    
这是章节1
    


    
章节2
    
这是章节2
    


    
章节3
    
这是章节3
    


    
章节4
    
这是章节4
    


    
章节5
    
这是章节5
    


    
章节6
    
这是章节6
    


    


    使用下面按钮，实现返回前一个页面:
    

               
    

7.3.2、返回下一个浏览的页面

forward（）方法，加载 history 列表中的下一个 URL

语法：

window.history.forward();   // 相当于浏览器的前进按钮
// 相当于
window.history.go(1);

实例：

 


点击下面的锚点链接，添加历史列表项:    
    

    第一个锚点
    
    

    第二个锚点
    
    


    使用下面按钮，实现返回下一个页面:
    

               
    

7.3.3、返回浏览器历史的其他页面

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

语法：

window.history.go(number);

参数：

• 1：前一个，go（1）= forward（）
• 0：当前页面
• 其他数值：要访问的 URL 在 history 的 URL 列表中的相对位置

实例：

点击返回前一个页面，返回到 #target1，点击返回下一个页面，返回到 # target2

 


    点击下面的锚点链接，添加历史列表项:    
    

    第一个锚点
    
    

    第二个锚点
    
    


    使用下面按钮，实现返回前或下一个页面:
    

       
        
    

7.3.4、使用 history 对象实现几个页面之间跳转

back.html

    
    


    

        forward
        
    

forward.html

    
    


    

        back  

        go
         

        
    

go.html

7.4、location 对象

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

语法：

location.[属性 | 方法]
window.location.href = 'http://www.imooc.com'          // 打开慕课网

location 对象属性图示：

image

location 对象属性：

属性	描述
hash	设置或返回从 # 号开始的 URL （锚）
host	设置或返回主机名和当前 URL 的端口号
hostname	设置或返回当前 URL 的主机名
pathname	设置或返回当前 URL 的路径部分
protocol	设置或返回当前 URL 的协议
href	设置或返回完整当前 URL
port	设置或返回当前 URL 的端口号
search	设置或返回从问号（？）开始的 URL （查询部分）

location 对象方法：

属性	描述
assign（）	加载新的文档
reload（）	重新加载当前文档
replace（）	用新的文档替换当前文档

实例：

 
-------------

URL: https://www.imooc.com/code/1153
hash: 
hostname: www.imooc.com
pathname:/code/1153
port: 
protocol: https:

7.5、navigator 对象

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

对象属性：

属性	描述
appCodeName	浏览器代码名的字符串表示
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的 user agent 头部的值

实例：

------

brower_code_name: Mozilla

brower_name: Netscape

brower_version: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

brower_platform: Win32

brower_agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

7.5.1、userAgent

返回用户代理的字符串表示（即包含浏览器版本信息等的字符串）

语法：

navigator.userAgent;

几种浏览器的 user_agent，360 的兼容模式用的是 IE ，极速模式用的是 Chrome 内核

image

实例：

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

  

     
  


-----------

浏览器:Chrome
u_agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

7.6、screen 对象

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

语法：

window.screen.属性;

screen 对象属性：

1. availHeight：窗口可以使用的屏幕高度，单位像素
2. availWidth：窗口可以使用的屏幕宽度，单位像素
3. colorDepth：用户浏览器表示的颜色位数，通常为 32 位（每像素的位数）
4. pixelDepth：用户浏览器表示的颜色位数，通常为 32 位（每像素的位数）（IE 不支持此属性）
5. height：屏幕的高度，单位像素
6. width：屏幕的宽度，单位像素

7.6.1、屏幕分辨率的高和宽

height 和 width 分别可以获取屏幕的分辨率高和宽

• 单位以像素计
• window 这个前缀可以省略

实例：

----

屏幕宽度：1366px
屏幕高度：768px

7.6.2、屏幕可用高和宽

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

不同浏览器的任务栏默认高度不一样，位置也不一样，所以高和宽可能也不一样

实例：

chrome、win 10

----

可用宽度：1366px
可用高度：728px

7.7、课程练习

制作一个跳转页面，不作任何操作 5 s 后跳转到另外一个页面，点击返回到前一个页面

 
    
     
 
 
  
  
操作成功
  

    5秒后回到主页 返回