博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
聊聊BOM的那些事
阅读量:6262 次
发布时间:2019-06-22

本文共 2850 字,大约阅读时间需要 9 分钟。

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()来取消该定时

转载地址:http://dckpa.baihongyu.com/

你可能感兴趣的文章
Linux C Programing - Arguments(2)
查看>>
禁止选择文本和禁用右键 v1.0
查看>>
swift 动画
查看>>
can 驱动
查看>>
Linux使用ASF云挂卡(挂游戏时长)
查看>>
UML入门 之 交互图 -- 时序图 协作图详解
查看>>
【Android 多媒体开发】 MediaPlayer 网络视频播放器
查看>>
Linux 绝对路径与相对路径
查看>>
海伦公式
查看>>
MatlabTrick
查看>>
leetcode — minimum-depth-of-binary-tree
查看>>
Java代码风格和在idea中的一些设置
查看>>
poj 1730
查看>>
(匹配)Courses -- hdu --1083
查看>>
(并查集)Connections in Galaxy War -- zoj --3261 还没写
查看>>
bit类型数据,是1=false 还是0=false
查看>>
(转)Eclipse中junit框架的使用——单元测试
查看>>
lock关键字理解
查看>>
20172303 2018-2019-1 《程序设计与数据结构》第3周学习总结
查看>>
[Javascript]史上最短的IE浏览器判断代码
查看>>