bom的用途（BOM的概述及方法）
导读：BOM的概述：...
BOM的概述：
bom 称为浏览器对象模型（bowser object model） ，也就意味他可以获取浏览器上的所有内容以及相关的操作 。BOM缺乏规范的 ，存在共有对象来解决这个问题 ，但是共有对象也存在兼容问题（ie10以后）
window
概述： window是顶层对象 属于golbal对象 。他是所有全局变量的父亲 。
相关方法 打印方法弹窗方法
//弹窗
window.alert(hello) //弹提示窗
var isTrue = confirm(你确认要删除吗) //交互框 true确认 false取消 返回
console.log(isTrue);
var str = prompt(请输入你的手机号) //输入框 他会有个输入框让你输入返回对应的你输入的内容 （string的内容）
console.log(str);
打开关闭方法
//打开 open 关闭 close
// 第一个参数是url地址 第二个参数为title target(打开方式 _blank _self _parent) 第三个参数为设置的参数（窗口的高度 宽度等等）
window.open(http://www.baidu.com,_blank,width=300,height=100,top=0,left=0)
// height=100 窗⼝⾼度；
// width=400 窗⼝宽度；
// top=0 窗⼝距离屏幕上⽅的象素值；
// left=0 窗⼝距离屏幕左侧的象素值；
// toolbar=no 是否显⽰⼯具栏 ，yes为显⽰；
// menubar ，scrollbars 表⽰菜单栏和滚动栏 。
// resizable=no 是否允许改变窗⼝⼤⼩ ，yes为允许；
// location=no 是否显⽰地址栏 ，yes为允许；
// status=no 是否显⽰状态栏内的信息（通常是⽂件已经打开） ，yes为允许；
window.close() //关闭当前的窗口 （关闭浏览器只能有一个页面）
改变位置的方法
//moveBy 一个是x轴的距离 y轴的距离
window.moveBy(100,100) //X+100 Y+100
//moveTo 一个x轴 一个y轴
window.moveTo(200,200) //X=200 Y=200
改变大小的方法
//改变对应的窗口大小
window.resizeBy(200,200) //width+200 height+200
//resizeTo
window.resizeTo(200,200) //width=200 height=200
打印方法
//print打印方法
window.print()
聚焦和失焦的方法
//focus 聚焦 blur 失去焦点
window.focus()
window.blur()
查找方法
//find查找 ctrl+f
window.find()
滚动栏位置改变
//滚动栏位置改变 初始位置 x:0,y:0
window.scrollBy(100,100) //原本的位置 x+100 ，y+100
window.scrollTo(500,500) //到达位置 x=500 y=500 //回到顶部
location对象 （非常重要）
属性
console.log(location.hash) //哈希 #后面带的值 *
console.log(location.host) //主机 域名 ip地址+端口号
console.log(location.hostname) //主机名 ip地址 （127.0.0.1表示本机地址和localhost是一样的）
console.log(location.protocol) //协议 用于通信 （基于tcp/ip）http（明文传输） https（安全）（加密过）
console.log(location.port) //端口号 1--65525 （1-100的端口电脑占用了）http默认的端口80 https默认端口443
console.log(location.href) //链接的地址 也可以设置
console.log(location.search); //?后面带的值 一般是get请求传输数据的时候 *
console.log(location.origin); //跨域
console.log(location.pathname); //路径名 获取的除了协议和ip地址加端口号后面的东西
方法
assign 跳转页面
location.assign(http://www.baidu.com)
replace 替换页面
location.replace(http://www.weibo.com)
reload 重新加载页面
location.reload()
//参数 boolean类型的值 true（从服务器加载 慢） false （从缓存中加载 快）
history对象 （重点）
属性 length 历史页面个数 state 状态存储的对象 scrollRestoration 滚动栏恢复 方法forwad 前进
function fn(){
history.forward() //前进
}
back 后退
function fn1(){
history.back() //后退
}
go 去任意的历史页面
function fn2(){
history.go(-1) //去任意页面 0就是自己 小于0 后退 大于0前进
}
pushState
//spa 单页应用
function fn3(){
//添加state的值 数据 "" 地址(会产生跨域问题)
history.pushState(hello,,./index.html) //会改地址 但是不会刷新 推一个历史页面到历史区 state设置进去
}
replaceState
function fn4(){
//替换state
history.replaceState(world,,/location对象讲解.html) //会改地址 但是不会刷新 在历史区直接修改当前这个历史页面 state设置进去
}
screen 对象
属性 avaliHeight 可占用的最大高度 avaliWidth 可占用的最大宽度 avaliLeft 离屏幕左侧的距离 avaliTop 离屏幕上方的距离navigator对象
属性 userAgent 用户浏览器设置信息下面是BOM的一个思维导图
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！