BOM笔记

目录

• BOM (浏览器对象模型)
  • 简介
  • window对象
    • 子对象 history
      • 方法（api）
    • 子对象 lacation
      • lacation属性
    • 子对象 navigator
      • navigator的属性
    • 子对象 screen
      • screen 属性
    • 子对象 frames
      • 常用api
      • 属性

BOM (浏览器对象模型)

简介

作用：提供了独立的内容与浏览器窗口进行交互，因为BOM的核心功能是管理窗口和窗口之间的通讯。所以说BOM当中核心对象是window。

BOM里面包括了诸多对象，由这些对象共同构成了BOM，这诸多的对象当中提供了很多方法
和属性就是BOM实现功能的依据。

BoM最初是NetScape浏览器标准的一部分。

window对象

window对象是BOM的核心对象，其他对象都是通过BOM延申而来。可以说其他
的对象上的子对象。因为window对象是最顶层的对象，所以window对象的方
法在调用过程中可以不写window

子对象 history

主要处理的是浏览器窗体当中的导航

方法（api）

history.go : 切换访问，参数为正数则模拟的是浏览器当中的前进按钮为负数则模拟的是浏览器当中的后退

//点击前进到下一个网页
btn.onclick  = function(){
    history.go(1);
}
//点击后退一个网页
btn.onclick = function(){
    hostory.go(-1);
}

history.back 后退一次

history.forward 前进一次

子对象 lacation

获取和设置窗口的url,并且可以解析url

url 统一资源定位符

lacation属性

hash : url当中#后面的内容

host : 域名（带有端口号）

hostname : 域名（不带端口号）

herf : 完整的url地址

pathname : 域名后的内容(路径)

port : 端口

protocol : 协议 （http等）

search : 表示请求的参数

toString : 可以将域名变成纯粹的字符串

子对象 navigator

查看浏览器和操作系统的相关信息

navigator的属性

appCodeName 浏览器代码名

appName 官方浏览器的字符串表示

appVersion 浏览器版本信息

cookieEnable 检测浏览器是否开启cookie，true表示开启

userAgent 用户代理头

子对象 screen

屏幕

screen 属性

availHeight 窗口可以使用的屏幕高度，单位像素

availWeight 窗口可以使用的屏幕宽度

colorDepth 浏览器表示的颜色位置

height 屏幕高度

width 屏幕宽度

子对象 frames

浏览器框架集合对象

常用api

moveBy 相对窗口的当前坐标把它移动指定的像素(IE能用)

window.moveBy(x,y);

moveTo 当前窗口移动到指定的坐标位置

window.moveTo(x,y);

resizeBy 调整窗口大小

window.resizeBy(x,y);

resizeTo 动态调整窗口的大小

window.resizeTo(x,y);

scrollTo 可把内容滚动到指定的坐标

scrollTo(xpos,ypos)

scrollBy 可把内容滚动指定的像素数

scrollBy(xnum,ynum)

focus 获取聚焦

documentElement.focus();

blur 失去焦点

documentElement.blur();

open 打开网页

window.open('http://www.baidu.com');

属性

innerWidth 浏览器窗口可视区宽度（不包括浏览器控制台，菜单栏，工具栏） 不兼容IE9以下

innerHeight 浏览器窗口可视区高度（不包括浏览器控制台，菜单栏，工具栏） 不兼容IE9以下

document.documentElement.clientWidth 浏览器窗口可视区宽度（不包括浏览器控制台，菜单栏，工具栏） IE低版本可用

document.documenElement.clientHeight 浏览器窗口可视区高度（不包括浏览器控制台，菜单栏，工具栏） IE低版本可用

outerHeight 浏览器整体高度

outerWidth 浏览器整体宽度