浏览器对象模型
浏览器的对象模式简称bom,就是可以和浏览器进行交互的交互对象.交互对象有 window,location,navigation,screen, history。
window
window对象是浏览器对象模型的核心对象,通过js可以访问浏览器的接口,也是es规定中的全局对象
window对象属性和方法
1.alert() //浏览器的原生弹框,接收字符串参数
2.confirm() //浏览器的原生确认对话框,提供确认和取消的两种事件
//返回值为true则是确认事件,返回值如果是false则是取消事件
3.prompt() //浏览器的原生输入框 两参数一个是显示框的默认信息,一个是输入框的默认文本,返回值则是输入框的值
4.open() //浏览器的原生导航方式,可以打开新的浏览器窗口,window.open('加载的url',窗口目标(_blanck,_self,_top等),特定的字符串,是否取代历史记录中当前页面(true/false))
5.onerror() //未进行捕获的错误调用它 并将错误的消息输入到浏览器中,window.onerror(错误信息,地址,行数) 一般用于前端异常监控的时候。
6. setTimeout() 超时调用 setTimeout(fn,毫秒) //一定时间后进行调用
7.setInterval() 间歇调用 setInterval(fn,毫秒) // 每隔一定的时间进行调用
//窗口位置
8.screenLeft 窗口相对于屏幕的左边位置 (兼容 ie,safari,chrome)
9.screenTop 窗口相对于屏幕的上边位置 (兼容 ie,safari,chrome)
10.screenX 窗口相对于屏幕的左边位置 (兼容 firefox)
11.screenY 窗口相对于屏幕的上边位置 (兼容 ifirefox)
12.moveBy(x,y) 水平和垂直方向指定的距离
13.moveTo(x,y) 移动到新位置的坐标
//位置兼容代码
const x = (typeof window.screenLeft === 'number') ? window.screenLeft:window.scrrenX //左距
const x = (typeof window.screenTop === 'number') ? window.screenTop:window.scrrenY //上距
//窗口大小
14.innerWidth/innerHeight (chrome)返回的是窗口的大小(ie,safari,firefox,opera)可视区域的大小, 对于移动端的ie来说用document.body.clientWidth 获取可视区域的大小
15 resizeTo(width,height)浏览器新的宽高
location
1.hash //返回地址栏#后面的值
2.host //返回的是服务器名称和端口
3.hostname //返回的是服务的名称 不包含端口
4.href // 返回的是当前的地址栏中完整的url
5.pathname // 返回的是文件的路径
eg:
//地址栏 https://segmentfault.com/a/1190000014212576
location.pathname // '/a/1190000014212576'
6.port //返回URL的端口
7.protocol //返回协议 http或者https协议
8.search // 返回查询字符串 以问号开头
eg:
//地址栏 https://segmentfault.com/a/1190000014212576?test='wewe'&search='we'
location.search // ?test='wewe'&search='we'
9.reload() //重新刷新页面 默认加载的是上次请求过来的数据,如果传参为true 则代表的是强制重服务器进行数据请求刷新
10.assign(新的url) //打开新的url 之前的历史记录会被清除 只有两条历史记录,一条是新的url一条是跳转的页面
11.replace(新的url) //替换当前的页面地址 浏览器不会有历史记录
Navigation对象
nabigation 表示用户代理的状态和标识 在这个对象中我们可以查看到 浏览器的版本,浏览器云溪的操作系统 等等信息
screen对象
scrren对象表示的是浏览时窗口 其提供了窗口显示大小等信息
history对象
history 对象保存着用户上网的历史记录。
go(number) //跳转到历史记录中的第几页
back()//后退一页 等价于go(-1) 区别在于go(-1)返回上一页 上一页中的数据都在 back()返回数据全部小时
forword() //前进一页 //等价于go(1)
lenght // 历史记录的长度 用户检测当前页面是否是历史第一页
用setTImeout 实现setInterval
function interval(fn,timeout,frequency)
//回调
var interv=function(){
if(typeof frequency == 'undefined'|| frequency-->0){
//持续调用
setTimeout(interv,timeout)
try{
fn.call(null)
}catch(e){
frequency=0
throw e
}
}
//初次调用
setTImeout(interv,timeout)
}