BOM浏览器对象模型常用方法

骑猪看日落 2022-11-27 12:10 166阅读 0赞

# 浏览器对象模型 (BOM) #

使 JavaScript 有能力与浏览器"对话"。

## Window 对象 ##

*  Window对象是BOM的核心，window对象指当前的浏览器窗口
 *  所有 JavaScript 全局对象、函数以及变量均自 动成为 window 对象的成员
 *  全局变量是window对象的属性
 *  全局函数是window对象的方法

**Window 尺寸**  
有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：  
`window.innerHeight - 浏览器窗口的内部高度(包括滚动条)`  
`window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)`

对于 Internet Explorer 8、7、6、5：  
`document.documentElement.clientHeight`  
`document.documentElement.clientWidth`

或者  
`document.body.clientHeight`  
`document.body.clientWidth`  
**Window Screen**  
window.screen对象在编写时可以不使用 window 这个前缀。

一些属性：  
`screen.availWidth - 可用的屏幕宽度`  
`screen.availHeight - 可用的屏幕高度`  
**Window Location**  
window.location 对象在编写时可不使用 window 这个前缀。 一些例子：

一些实例:

location.hostname 返回 web 主机的域名
    location.pathname 返回当前页面的路径和文件名
    location.port 返回 web 主机的端口 （80 或 443）
    location.protocol 返回所使用的 web 协议（http: 或 https:）
    location.href 属性返回当前页面的 URL。
    location.assign() 方法加载新的文档。

**Window History**  
window.history对象在编写时可不使用 window 这个前缀。

`history.back() - 与在浏览器点击后退按钮相同`  
`history.forward() - 与在浏览器中点击向前按钮相同`

**Window Navigator**  
window.navigator 对象包含有关访问者浏览器的信息,在编写时可不使用 window 这个前缀。

**弹窗**  
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

**警告框**:

1.  经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。
2.  window.alert(“sometext”); 可以不带上window对象，直接使用alert()方法。

**确认框**:

1.  通常用于验证是否接受用户操作。
2.  当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。 当你点击 “确认”, 确认框返回 true， 如果点击  
    “取消”, 确认框返回 false。
3.  window.confirm(“sometext”); 可以不带上window对象，直接使用confirm()方法。

**提示框**:

1.  经常用于提示用户在进入页面前输入某个值。
2.  当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。  
    如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
3.  window.prompt(“sometext”,“defaultvalue”);可以不带上window对象，直接使用prompt()方法。
    
        换行:弹窗使用 反斜杠 + "n"(\n) 来设置换行。

其他事件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]

## 计时器 ##

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。  
计时器类型：  
一次性计时器：仅在指定的延迟时间之后触发一次。  
间隔性触发计时器：每隔一定的时间间隔就触发一次

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:  
`setInterval() - 间隔指定的毫秒数不停地执行指定的代码。`  
`setTimeout() - 在指定的毫秒数后执行指定代码。`

注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

**setInterval() 方法**  
语法：window.setInterval(“javascript function”,milliseconds);

> 1.window.setInterval() 方法可以不使用 window 前缀，直接使用函数 setInterval()。  
> 2.setInterval() 第一个参数是函数（function）。  
> 3.第二个参数间隔的毫秒数

**setTimeout() 方法**  
语法：window.setTimeout(“javascript function”, milliseconds);  
**clearInterval() 方法**

*  clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
 *  语法 ：window.clearInterval(intervalVariable)
    
        window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。
         
         要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量

**clearTimeout() 方法**

*  clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
 *  语法：window.clearTimeout(timeoutVariable)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200815135442301.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/ba74e72d2ec24cdbaf24f766ef6e7ea6.png