‎JavaScrip‎t‎之BOM基础

来源:kmgdwlc.com   作者:   发表时间:2020-02-18 04:18:05

BOM(Browser Object Model)也叫浏览器对象,它提供了很多对象,用于访问浏览器的功能。但是BOM是没有标准的,每一个浏览器厂家会根据自己的需求来扩展BOM对象。本文主要以一些简单的小例子,简述前端开发中BOM的相关基础知识,仅供学习分享使用,如有不足之处,还请指正。

window对象是最顶层的对象,旗下还有6大属性,也都是对象。document对象下也有5大属性,同样都是对象。window的属性和方法,可以采用:window.属性,或 window.方法()进行调用,或者直接调用。BOM结构图,如下所示:

window提供的默认对话共三种:系统对话框(alert),选择对话框(confirm),输入对话框(prompt),如下所示:

通过调用window.open方法,打开新的窗口。open方法共3个参数:1、新窗口的URL 2、窗口名称或目标 3、设置窗口属性 。如下所示:

第三个参数,是窗口的一些特征,如宽,高,坐标,等。用逗号隔开。如下所示:

open方法默认返回新窗口的window对象,可以通过返回值来访问子窗口内容。

用于获取和设置窗口的位置(左上角的起始坐标),主要通过screenLeft、screenTop和screenX、screenY来访问,如下所示:

以上属性有的浏览器不支持,可以判断返回值是否是number类型来区分,如下所示:

窗口的大小,主要通过innerWidth、innderHeight和outerWidth、outerHeight来设置和获取。如下所示:

如何跨浏览器获取窗口大小,可以通过document.compatMode判断浏览器的模式,如下所示:

通过moveTo、moveBy和resizeTo、resizeBy来设置窗口的大小和移动位置,如下所示:

window的定时器一共有两种:1、超时操作(setTimeOut) 2、间歇操作(setTimeInterval)。

超时操作:第一个参数:可以执行的代码块字符串,第二个参数:超时时间,单位毫秒。如下所示:

但是上述方法就分开的,不是一个整体,推荐采用如下方式优化:

备注:超时操作通过clearTimeout来取消操作,参数为超时操作返回的id。

间歇调用,可以重复执行,定时执行,如下所示:间隔200毫秒,输出1到5。

上述例子,也可以通过超时调用,模拟间歇调用,如下所示:

javascript中location地址对象描述的是某一个窗口对象所打开的地址。如下所示:

重新加载,通过reload来实现,如下所示:

主要用于访问历史记录,如:前进、后退、跳转等,如下所示:

navigator对象包含访问者客户端的相关信息,且navigator对象的实例的唯一的,如下所示:

通过navigator对象输出浏览器的插件信息,如下所示:

浏览器支持的MIME类型,如下所示:

编辑:

未经授权许可,不得转载或镜像
© Copyright © 1997-2019 by kmgdwlc.com all rights reserved