什么是BOM,以及BOM的相关方法

88 阅读7分钟

BOM

概述

BOM (Browser Object model 浏览器对象模型),主要是对应的浏览器内容的相关操作对象。它缺乏规范,利用共有对象来解决每个浏览器不一致的问题。

BOM主要的内容

  • window 浏览器窗口
  • location 地址栏 *
  • history 历史对象 *
  • navigator 导航对象
  • screen 屏幕对象
  • document 文档对象
  • frames 子窗口对象实际它也是一个window

window对象

window对象是浏览器global对象,它表示浏览器的窗口。里面具备相关方法及内容。所有的全局属性及对应的全局方法都是它的子内容。bom其他的相关内容都是window的子元素(属性)。

属性

  • caches 浏览器缓存
  • crypto 浏览器的加密模块
  • indexedDB 浏览器的数据库
  • innerHeight,innerWidth 浏览器显示区域的宽高
  • localStorage,sessionStorage 浏览器的本次存储
  • console 浏览器控制台对象
  • ....
//相关属性
console.log(window.caches) //浏览器缓存
console.log(window.clientInformation) //客户端详情 返回一个navigator对象
console.log(window.closed) //是否关闭
console.log(window.crypto) //加密包
console.log(window.indexedDB) //浏览器自带数据库 (存储其他地方存储不了的数据 存储数据大)
console.log(window.innerHeight,window.innerWidth) //获取窗口的高度 获取窗口的宽度 显示内容部分
console.log(window.localStorage) //本地存储
console.log(window.sessionStorage) //本地存储
console.log(window.console) //获取控制台对象
console.log(window.document)
console.log(window.history)
console.log(window.location)
console.log(window.frames)

方法 (window对象可以被省略)

打印相关方法
//打印相关的方法
console.log('日志打印')
console.debug('调试打印')
console.error('错误打印')
console.info('信息打印')
console.dir('文件打印')
console.warn('警告打印')
//清空控制台
console.clear()
弹窗相关方法
  • alert
  • confirm
  • prompt
alert('信息弹窗')
//输入弹窗 返回输入的字符串
var str =  prompt('输入弹窗')
console.log(str)
//交互弹窗 接收一个boolean类型的值 点击确认返回true 点击取消返回false
var is = confirm('您是否要删除')
console.log(is)
打开和关闭窗口的方法
  • open

    //打开窗口
    //相关配置
    // width=1024 窗口宽度;
    // height=700 窗口高度;
    // top=0 窗口距离屏幕上方的象素值;
    // left=0 窗口距离屏幕左侧的象素值;
    // titlebar=no 是否显示标题栏,被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes;
    // menubar=no 表示菜单栏,默认值是yes;
    // scrollbars=yes 是否显示滚动条,默认值是yes;
    // resizable=no 是否允许改变窗口大小,默认值是yes;
    // status=no 是否要添加一个状态栏,默认值是yes;
    // toolbar=no 是否显示工具栏,默认值是yes;
    // location=no 是否显示地址栏,默认值是yes;
    //打开窗口url地址 相关打开方式(_self 自身打开 _blank 新的页面) 窗口的相关配置
    window.open('http://www.baidu.com','_blank','width=20,height=40,top=0,left=0')
    
  • close 关闭自身的窗口

    window.close()
    
窗口位置移动的方法
  • moveTo 传入对应的x,y坐标移动到这个坐标

    //100,100
    window.moveTo(200,200) //移动到坐标200,200的位置
    
  • moveBy 传入对应的需要移动的距离 在原本的基础上移动这个距离

    //100,100
    window.moveBy(200,200) //移动到坐标300,300的位置
    
窗口大小的更改的方法
  • resizeTo 传入对应的宽高 更改到这个宽高的大小

    //100,100
    window.resizeTo(200,200)  //200,200
    
  • resizeBy 传入对应的宽高 在原本的大小上增加对应的宽高

    //100,100
    window.resizeBy(200,200)  //300,300
    
滚动栏的位置更改 (x,y)
  • scrollTo 传入x,y坐标移动到这个坐标

    //50,50
    window.scrollTo(100,100) //滚动栏距离到100,100
    
  • scrollBy 传入移动的距离在原本基础上移动对应的距离

    //50,50
    window.scrollBy(100,100) //滚动栏距离到150,150
    
print 打印方法
window.print()
获取焦点和失去焦点的方法
window.focus() //获取焦点
window.blur() //失去焦点
定时器和延时器
window.setInterval(function(){},1000,'传递的参数')
window.clearInterval('定时器id')
window.setTimeout(function(){},1000,'传递的参数')
window.clearTimeout('延时器id')
延时器
window.setImmediate //等待其他执行完再执行

location

location表示是地址栏对象,主要作用是设置地址栏内容及获取地址栏内容。

属性(所有属性都是可读可写)

  • hash #号后面的值
  • host 主机
  • hostname 主机名
  • href: 地址路径
  • origin 跨域地址
  • pathname 路径名
  • port 端口号
  • protocol 协议
  • search ?后面携带的参数
console.log(location)
// #号后的值 #一般都存在于最后面
console.log(location.hash)
//域名 相当于ip地址+端口号 localhost表示本机它的IP为127.0.0.1
console.log(location.host)
//ip地址
console.log(location.hostname)
//地址的链接
console.log(location.href)
//跨域地址 
console.log(location.origin)
//路径地址  去除对应的ip地址+端口号的剩余内容
console.log(location.pathname)
//端口号 1-65525 (1-100的端口一般被系统占用) http协议默认端口为80  https的默认端口为443
console.log(location.port)
//超文本传输协议 网络请求访问常用  http 不安全  https 安全
console.log(location.protocol)
//?后面的值 ?用于传递参数的 ?key=值&key=值
console.log(location.search)
//location是可以设置的
location.hash = "hello"
location.search = 'name=tom'
// location.port = 9999
location.proctocol = "https" //没作用
location.hostname = "127.0.0.1"
//href location的链接地址 设置href可以使页面跳转 没有历史记录
// location.href = "http://www.baidu.com"
location = "http://www.baidu.com" //跟href属性是一致的

方法

  • reload 重新加载
  • assign 跳转页面
  • replace 替换href地址跳转页面
//重新加载
location.reload() 
// 历史原因 可以会传入对应的boolean类型的值 true表示重新加载  false表示从缓存中加载
location.reload(true) 
// assign 跳转页面的 有历史记录的
location.assign('http://www.baidu.com')
// 替换当前href地址 没有历史记录
location.replace('http://www.baidu.com')

history

history是历史对象,主要是用于操作对应的历史页面的。

属性 (只读)

  • state 状态值
  • length 历史页面个数
  • scrollRestoration 滚动恢复属性
console.log(history.state) //状态值 默认为null
console.log(history.length) //历史页面个数
console.log(history.scrollRestoration)//滚动栏位置缓存选项 滚动恢复属性

方法 (不会进行刷新操作)

  • pushState 将历史页面推入(设置state的值)

  • replaceState 将历史页面替换 (设置state的值)

    /* pushState replaceSate 三个参数  设置给state的数据 打开的页面名字("")  链接地址
      pushState 推入一个历史页面 这个页面地址会替换当前的页面地址 但是不会进行页面刷新操作 state的值会发生变化 历史页面个数+1
      replaceState 替换当前的历史页面 这个页面地址会替换当前的页面地址 也不会进行刷新操作 state的值会发生变化 历史页面个数不会变化
    */
    //相关方法
    function fn(){
        history.pushState('hello','','./state.html')
        console.log(history.length) //2
        console.log(history.state) //hello
    }
    function fn1(){
        history.replaceState('hi','','./state.html')
        console.log(history.length) //1
        console.log(history.state) //hi
    }
    
  • forward 前进

  • back 后退

  • go 历史页面跳转

    <!-- 前进后退和跳转 -->
    <button onclick="history.forward()">前进</button>
    <button onclick="history.back()">后退</button>
    <!-- go方法里面传入的是对应的数值 0为当前页面 大于为0为前进 小于0为后退 -->
    <button onclick="history.go(-1)">跳转</button>
    

navigator

浏览器的导航对象,主要是描述当前浏览器的信息及相关内容。

相关属性

userAgent 携带发生给对应的服务器

console.log(navigator.appName) //当前应用名
console.log(navigator.appCodeName) //应用编码名
console.log(navigator.appVersion) //应用版本
console.log(navigator.userAgent) //客户端相关信息

screen

浏览器的屏幕对象,主要是用于获取当前的屏幕大小。(大屏可视化)

属性
  • width 宽度
  • height 高度
  • availHeight 可占用高度
  • availWidth 可占用宽度
//宽度和高度
console.log(screen.width);
console.log(screen.height);
//可占用宽度和高度
console.log(screen.availHeight);
console.log(screen.availWidth);

document

表示当前的文档对象,也就是书写的html文档。

frames

表示子窗口,实际也是一个window对象

总结

  • bom是利用共有对象来实现对应的兼容。主要的对象有window,history , screen , navigator, document、frames、location。
  • history主要是用于操作历史页面的,里面的方法都不会进行刷新操作。(back、forward、go 、pushState 、replaceState)
  • location 主要是用于操作对应的地址栏 里面的属性都可以进行设置(hash、query)。 主要的方法有(reload、assign、replace)。
  • screen主要是屏幕对象,它可以获取屏幕相关内容。
  • navigator是导航对象,主要可以获取浏览器的相关内容及外设。
  • bom基础是路由的底层实现(主要用到了location 及 history)
跳转页面的几种方式
  • a标签跳转页面
  • location赋值
  • location.href赋值
  • location.assign()
  • location.replace()
  • history.go()
  • history.back()
  • history.forward()