聊聊BOM的那些事

widuu 发布于2019-08-23 11:48 / 1850人阅读

摘要：如果省略该参数，取默认值该方法的返回值是一个正整数，表示定时器的编号。

BOM

BOM的全称是Browser Object Model，被译为浏览器对象模型
BOM提供了独立于HTML页面内容，而与浏览器相关的一系列对象，主要被用于管理浏览器窗口及与浏览器窗口之间通信等功能
BOM由一系列对象构成，这些对象可以简单理解为是由各个浏览器所提供的

Window对象

BOM中最核心的对象就是Window对象，该对象表示运行HTML页面的浏览器窗口
在浏览器环境中，Window对象具有双重角色，该对象既是允许JavaScript逻辑访问浏览器窗口的一个对象，又是ECMAScript规范中的Global全局对象
在浏览器环境中运行JavaScript逻辑时，在全局作用域中定义的对象、变量和函数都是Window对象的属性和方法
也可以通过Window对象访问Global全局对象的属性和方法。

全局作用域

在浏览器环境中，由于ECMAScript规范中Window对象代表了Global全局对象，因此所有定义在全局作用域中的变量和函数，都可以通过Window对象的属性和方法方式访问

var name="前端";
function fun(){
    console.log("this is function");
}
//window对象的属性和方法方式访问
console.log(window.name);
window.fun();

Window对象的属性

Window对象的属性数量较多，包含了浏览器窗口的基本信息、也包含了一些复杂的信息。可以人为将Window对象分为以下三类：
1.BOM中其他对象，例如Navigator对象等
2.一些有关浏览器窗口的基本信息等，这些属性多属于DOM 0级别，并不是W3C标准规范
3.包含了大量有关HTML5版本新增的功能等

浏览器窗口的宽度和高度

Window对象提供的属性中可以获取当前浏览器窗口的宽度和高度

innerWidth和innerHeight属性：只读属性，返回当前浏览器窗口的可视宽度和高度，如果存在滚动条，也包含滚动条

outterWidth和outterHeight属性：

Window对象与self属性

Window对象的self属性返回当前浏览器窗口的只读属性，self属性返回的是Window对象的引用

console.log(window==window.self);

Window对象的方法

Window对象的方法

系统提示框：alert()方法、confirm()方法和prompt()方法

打开与关闭窗口：open()与close()方法、showModalDialog()

DOM规范标准0级别的一些方法

定时器：setTimeout()与clearTimeout()、setInterval()与clearInterval()

Navigator对象

Navigator对象包含了一些有关浏览器状态的信息。可以通过window.navigator属性得到Navigator对象
Navigator对象提供一系列常用属性，获取当前浏览器的信息

appCodeName：浏览器的代码名

appName：浏览器的名称

appVersion：浏览器的平台和版本信息

platform：运行浏览器的操作系统平台

userAgent属性

Navigator对象的userAgent属性返回由客户机发送服务器的user-agent头部的值，userAgent属性是一个只读的字符串，声明了浏览器用于HTTP请求的用户代理头的值
通过userAgent属性获取用户当前使用的浏览器产品，提供浏览器兼容解决方案
通过userAgent属性获取用户当前使用的操作系统信息

History对象

History对象包含用户在浏览器中访问过的URL(网址)

length属性：History对象的length属性可以获取用户在浏览器中访问网址的数量

console.log("用户访问的网址数量为："+history.length);

History对象还提供了以下方法实现浏览器前进和后退功能

forward()：实现跳转下一个页面，作用和浏览器的前进按钮一样
back()：实现跳转上一个页面，作用和浏览器的回退按钮一样
go()：实现跳转到指定的页面，如果为负数表示后退，如果为正数表示前进

Location对象

Location对象包含了浏览器的地址栏中的信息，该对象主要用于获取和设置地址
Location对象很特别，因为该对象既是Window对象的属性，又是Document对象的属性

console.log(window.location==document.location);//true

Location对象的属性

Location对象不仅存储了地址栏中的信息，还提供了解析功能，可以通过不同的Location对象的属性访问不同的地址栏中的信息

host：返回服务器名称和端口号

hostname：返回服务器名称

href：返回当前加载页面的完整URL

pathname：返回当前URL中的目录和文件名

port：返回当前URL中的端口号

protocol：返回页面使用的网络协议

Location对象的方法

assign()：载入一个新的文档，作用和直接修改Location相同

reload()：重新载入当前文档，作用和刷新按钮一样，参数为true时，则会强制清空缓存刷新页面

replace()：用新的文档替换当前文档(不会生成历史记录，不能使用回退按钮回退)

定时器

定时器的具体方法由Window对象提供

延迟执行：指的是指定程序代码在指定时间后被执行，而不是立即被执行

setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码

var timeoutID=scope.setTimeout(function,delay);
function:要调用的函数或要执行的代码
delay:延迟的毫秒数(一秒等于1000毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0

该方法的返回值timeoutID是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时

周期执行：指的是指定程序代码在指定时间为间隔，重复被执行

setInterval()方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟

var timeoutID=scope.setInterval(function,delay);

function:要调用的函数或要执行的代码
delay:延迟的毫秒数(一秒等于1000毫秒)，函数的调用会在该延迟之后发生，如果省略该参数，delay取默认值0
该方法的返回值timeoutID是一个正整数，表示定时器的编号，这个值可以传递给clearInterval()来取消该定时

超融合服务器服务器托管云服务器那些事聊聊聊聊webrtc网关那些奇怪的错误

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97492.html

在 RustCon Asia 开启之前，聊聊 Rust 中国社区那些事

摘要：而在最新出炉的开发者调查中，连续年成为最受开发者喜爱的编程语言。在杭州的冬季，这一次直播，再次点燃了中国社区。的到来月日，在中国北京，秘猿科技和将携手开启中国首届社区大会。亚洲首届 RustCon Asia 将在 4 月 20 日于北京开启（也就是下周六啦~），大会为期 4 天，包括 20 日全天和 21 日上午的主题演讲以及 22-23 日的多个主题 workshop 环节。随着大...

curlyCheng 2019-08-06 14:52 评论0 收藏0
在 RustCon Asia 开启之前，聊聊 Rust 中国社区那些事

摘要：而在最新出炉的开发者调查中，连续年成为最受开发者喜爱的编程语言。在杭州的冬季，这一次直播，再次点燃了中国社区。的到来月日，在中国北京，秘猿科技和将携手开启中国首届社区大会。亚洲首届 RustCon Asia 将在 4 月 20 日于北京开启（也就是下周六啦~），大会为期 4 天，包括 20 日全天和 21 日上午的主题演讲以及 22-23 日的多个主题 workshop 环节。随着大...

xiangzhihong 2019-06-25 19:12 评论0 收藏0
字符编码的那些事

摘要：字符编码的那些事前言之前看到中对扩展了不少新特性，字符串操作更加友好，比如，，。其中涉及到不少字符编码的知识，为了更好理解这些新特性，本文对字符编码相关知识做一个较全面的梳理和总结。字符编码的那些事前言之前看到ES6中对String扩展了不少新特性，字符串操作更加友好，比如u{1f914}，codePointAt()，String.fromCodePoint()。其中涉及到不少字...

shadajin 2019-08-20 16:48 评论0 收藏0
字符编码的那些事

摘要：字符编码的那些事前言之前看到中对扩展了不少新特性，字符串操作更加友好，比如，，。其中涉及到不少字符编码的知识，为了更好理解这些新特性，本文对字符编码相关知识做一个较全面的梳理和总结。字符编码的那些事前言之前看到ES6中对String扩展了不少新特性，字符串操作更加友好，比如u{1f914}，codePointAt()，String.fromCodePoint()。其中涉及到不少字...

kviccn 2019-08-01 16:52 评论0 收藏0
聊聊Ajax那些事

摘要：年初，许多事件使得被大众所接受。这使得应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。调用方法后立即触发，若未被调用则不会触发此事件。了解Ajax的起源、概念及特点起源该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件由Outlook Web Access小组写成。该组...

v1 2019-08-29 11:08 评论0 收藏0