浏览器的内置对象

400 阅读3分钟

浏览器对象模型

浏览器的对象模式简称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 表示用户代理的状态和标识 在这个对象中我们可以查看到 浏览器的版本,浏览器云溪的操作系统 等等信息

企业微信截图_16415454919267.png

企业微信截图_16415455154493.png

screen对象

scrren对象表示的是浏览时窗口 其提供了窗口显示大小等信息

企业微信截图_16415454305251.png

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)
}