【面向JS--BOM】

BOM(Browser Object Document)即浏览器对象模型。

BOM提供了独立于内容 而与浏览器窗口进行交互的对象;

由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;

BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;

JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,而BOM缺乏标准,BOM最初是Netscape浏览器标准的一部分。

BOM结构图
bom

window对象

1.代替ES标准中的Global,充当全局对象
2.封装了浏览器软件以及窗口的信息

打开窗口:

window.open("url","name")
其中: name属性是内存中窗口的名称,在打开窗口时,才赋值
name的默认值: _self _top _blank,也可自定义name属性
规定: 相同name属性的窗口只能打开一个,后打开的会替代先打开的

预定义name属性:
    _self:自动获取当前窗口的name
    _blank:随机生成name

打开链接(a标签):

1、替换当前窗口内容,可以后退
    html:<a href="url" [target="_self"]>
    js:window.open("url","_self");
2、替换当前窗口内容,禁止后退
    js:location.replace("url")
3、在新窗口打开,可重复打开多个
    html:<a href="url" target="_blank">
    js:window.open("url","_blank");
4、在新窗口打开,只能打开一个
    html:<a href="url" target="自定义name属性">
    js:window.open("url","自定义name属性")

窗口大小:

完整窗口大小: window.outerHeight/outerWidth
文档显示区大小: window.innerHeight/innerWidth

调整窗口大小:

1、在打开窗口时:
    var config="top=?,left=?,height=?,width=?";
    window.open("url","name","config")
2、在窗口打开后,调整大小: 
    window.resizeTo(宽,高)
    window.resizeBy(宽的增量,高的增量)

窗口定位:

窗口左上角相对于屏幕左上角的坐标: 
     top: window.screenTop|screenY
     left: window.screenLeft|screenX
移动窗口位置: 
    window.moveTo(x,y): 将窗口左上角移动到x,y的位置
    window.moveBy(x的增量,y的增量)

window中封装的BOM对象

history对象:

封装当前窗口打开后,成功访问过的历史记录栈

length:返回浏览器历史列表中的 URL 数量。
history.go(n);n为负数,表示后退n次

另外,用back()和forward()方法可以实现同样的操作:
  history.back();   后退
  history.forward(); 前进

history.go(-1)和history.back()的区别
  history.go(-1)表示后退与刷新。如数据有改变也随之改变
  history.back()只是单纯的返回到上一页。    

location对象:

封装当前窗口正在打开的url完整地址

属性
    .href 设置或返回完整的 URL。
    .protocol 设置或返回当前 URL 的协议。
    .port 设置或返回当前 URL 的端口号。
    .pathname 设置或返回当前 URL 的路径部分。
    .host 设置或返回主机名和当前 URL 的端口号。 
    .hostname 设置或返回当前 URL 的主机名。
    .search 设置或返回从问号 (?) 开始的 URL(查询部分)。
    .hash 设置或返回从井号 (#) 开始的 URL(锚)。

比较
    document.referrer:返回载入当前文档的文档的 URL,多用于获取iframe,script等的路径

更改当前页面的url,实现刷新
    location.href=”urf”
    location=”url”

方法
    location.assign(“url”)在当前窗口打开新url
    location.replace(“url”)在当前窗口打开新url,禁止后退
    location.reload(bool)重新加载当前页面,bool规定是否绕过缓存加载,默认false

navigator对象:

封装浏览器配置信息的对象—-没有标准!!

.cookieEnabled 判断是否启用了cookie
.plugins:封装了浏览器安装的所有插件信息
判断是否包含插件
    navigator.plugins[插件名]!==undefined
.userAgent:包含浏览器名称,版本及内核的字符串

screen对象:

获得显示设备的分辨率

screen.width/height:获得屏幕完整分辨率
screen.availWidth/availHeight去掉任务栏后的可用宽高
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值