BOM学习总结-广州芦苇科技

BOM简介

BOM英文全称是Browser Object Model，即浏览器对象模型，为了便于操作浏览器而产生。W3C并没有对BOM统一标准，使用时注意兼容性问题。

window

定义

表示浏览器的窗口，是最顶层的对象

属性

frames

获取当前窗口下的所有子窗体数组对象。每个iframe标签都有相应的window对象
length

获取当前窗口下的框架数量
name

获取窗口名称
parent

获取当前窗口的父窗口
top

获取顶级父窗口
self

获取当前窗口
innerWidth

窗口可见区域的宽度
innerHeight

窗口可见区域的高度
pageXOffset

当前页面相对于窗口显示区左上角的X位置
pageYOffset

当前页面相对于窗口显示区左上角的Y位置
screenX

窗口相对于屏幕的X坐标
screenY

窗口相对于屏幕的Y坐标
outerWidth

窗口外部宽度，即工具条与滚动条部分的宽度
outerHeight

窗口外部高度，即工具条与滚动条部分的高度
opener

返回对创建此窗口的窗口的引用，比如在a.html打开b.html，需要从b.html传递一个数据给a.html上某节点，代码如下，
```
window.opener.document.getElementById(id).value =data;
```
localStorage

窗口的一个存储对象，数据永久保存
sessionStorage

窗口的一个存储对象，关闭窗口时数据被删除

扩展：全局变量与window对象属性的联系与区别

联系全局变量可以作为window对象的属性进行访问
区别全局变量不能直接delete；window对象属性能直接delete 访问未声明的全局变量会抛错；访问window对象未定义的属性不抛错

方法

setTimeout(fn/code,millseconds[,parms])

经过指定毫秒值计算一个表达式或调用某一个函数
setInterval(fn/code,millseconds[,parms])

每经过指定毫秒值计算一个表达式或调用某一个函数
clearTimeout(id)

取消先前用setTimeout设置的超时事件
clearInterval(id)

取消先前用setInterval设置的间隔事件
moveTo(x,y)

窗体移动了的偏移量
moveBy(x,y)

窗体移动到指定位置
scrollBy(x,y)

内容滚动了的偏移量
scrollTo(x,y)

内容滚动到指定位置
resizeTo(x,y)

窗口大小重置为指定的宽度和高度
resizeBy(x,y)

窗口大小相对于当前大小进行大小偏移
open(url[,target][,option])

打开指定url的窗口，也可另指定执行打开的窗口或框架目标，如_self、_parent、_top、_blank，和设置被打开窗口的选项字符串，如宽高、大小是否拖动边框可变、是否显示地址栏、菜单栏、工具栏、滚动条、状态栏等等。结果返回的是新打开的窗口对象。扩展：
- 弹窗安全限制
  1. 不允许在屏幕外创建弹出窗口
  2. 不允许将弹出窗口移动到屏幕以外
  3. 不允许关闭状态栏
  4. 不允许关闭地址栏
  5. 默认下不允许移动弹出窗口或调整大小
  6. 不允许关闭地址栏
  7. 只能根据用户创建弹出窗口，因此页面加载时调用open方法是无效的
- 弹出窗口屏蔽检测
```
function checkWindowBlocked(url){
    var blocked = false;
    try{
       var win = window.open(url);
        if(win == null){
            blocked = true;
        }
    }catch(ex){
         blocked = true;
    }
   if(blocked){
     alert("弹窗被屏蔽");
   }
}        
```
close()

关闭窗口
alert(content)

弹出警告消息框，指定警告内容，带有确定按钮
confirm(content)

弹出确认消息框，指定确认内容，带有确定和取消按钮
prompt(content,defaultvalue)

弹出提示消息框，指定提示内容和输入框默认值，带有确定和取消按钮
print()

弹出打印对话框
find()

弹出查找对话框
getComputedStyle(ele[,pseudoele])

获取指定元素的样式，需要的话可以传入伪类元素。与ele.style的区别：ele.style只读取内联样式，而getComputedStyle读取内联样式、嵌入样式、外部样式等；ele.style支持读写，而getComputedStyle只支持读
showModalDialog(sURL[,vArguments][,sFeatures])

sURL指定对话框要显示的文档URL，vArguments指定向对话框传递的参数，参数类型不限，而对话框通过window.dialogArguments取得传递进来的参数，sFeatures指定描述对话框的外观等信息，是一个可变参数

location

作用

提供当前页面url信息
实现页面跳转

属性

以https://www.baidu.com/index.php?tn=22073068_2_dg#1111为例，解释属性含义。

window.location.protocol

协议名，"https:"
window.location.hostname

主机名，不包括端口号，"www.baidu.com"
window.location.port

端口号，""
window.location.host

主机地址，包括端口号，"www.baidu.com"
window.location.pathname

路径名，"/index.php"
window.location.search

查询字符串，"?tn=22073068_2_dg"
window.location.href

链接地址，"https://www.baidu.com/index.php?tn=22073068_2_dg"
window.location.origin

源，"https://www.baidu.com"
window.location.hash

哈希值，"#1111"

应用：获取查询字符串

  function getQueryString(qs){
   if(typeof qs === "string"){
        var obj = {},arr;
        qs = qs.slice(1).split("&");
        for(item in qs){
            arr = qs[item].split("=");
            obj[arr[0]] = arr[1];
        }
        return obj;       
   }
  }

页面跳转几种方式

window.location = url;
window.location.href = url;
window.location.assign(url);
window.location.replace(url);//与assign区别在于，使用replace不可返回上一页面

修改当前url，会在浏览器历史中生成一条记录

location.hash = "#home";
location.hostname = "www.baidu.com";
location.pathname = "/home/index";
location.serach = "?key=liu&password=123456";
...

页面重载

window.reload();//从缓存中重新加载
window.reload(true);//从服务器重新获取数据进行加载

该方法建议放在代码最后，因为该方法调用后的接下来的代码可能执行也可能不执行，取决于网络延迟或系统资源等因素。

navigator

作用

识别浏览器

属性

appCodeName
浏览器名称。基本是Mozilla
appName
完整的浏览器名称
appVersion
浏览器版本
mimeTypes
浏览器注册的MIME类型数组
platform
浏览器所在的系统平台
plugins
浏览器安装的插件信息数组。该数组对象有一方法叫refresh，当传入参数true时表示刷新包含插件的所有页面，否则表示更新插件信息，不刷新含插件的页面。数组中的每一项含有插件名name、插件描述description、插件文件名filename、插件处理的MIME类型数量length
userAgent 浏览器用户代理字符串。可用于判断浏览器类型和版本

方法

cookieEnabled()

表示cookie是否启用
javaEnabled()

表示当前浏览器是否启用java
registerContentHandler(mime,url,appname)

使站点注册一个处理程序处理指定MIME。其中mime表示要处理的mime类型，url表示要处理的url如http://xxx?feed=%s，%s表示源请求，appname表示要处理的应用程序名称
registerProtocolHandler(protocol,url,appname)

使站点注册一个处理程序处理指定协议。其中protocol表示要处理的协议名称，url表示要处理的url如http://xxx?cmd=%s，%s表示源请求，appname表示要处理的应用程序名称

应用

判断桌面浏览器类型

  function getBrowserType(){
    var userAgent = window.navigator.userAgent;
    if(userAgent.indexOf("Trident")>-1){
        return "IE";
    }
    if(userAgent.indexOf("Firefox")>-1){
        return "Firefox";
    }
    if(userAgent.indexOf("Opera")>-1){
        return "Opera";
    }
    if(userAgent.indexOf("Edge")>-1){
        return "Edge";
    }
    if(userAgent.indexOf("Chrome")>-1){
        return "Chrome";
    }
    if(userAgent.indexOf("Safari")>-1){
        return "Safari";
    }
}

插件检测

  function hasPlugin(idname){
    var userAgent = window.navigator.userAgent;
    if(userAgent.indexOf("Trident")>-1){
        // IE检测
        try{
            new ActiveXObject(idname);
            return true;
        }catch(ex){
            return false;
        }
    }else{
        // 非IE检测
        for(var i=0;i<navigator.plugins.length;i++){
            if(navigator.plugins[i].name.toLowerCase().indexOf(idname.toLowerCase())>-1){
                return true;
            }
        }
        return false;
    }
}

history

作用

保存用户访问网页的历史记录

属性

length
访问的历史页面数量

方法

go(value) 跳转到历史列表的某页面。当value是number类型时，为正向前跳转value个页面，为负向后跳转；当value是string类型时，跳转到与value最匹配的页面。
back()
向后跳转，相当于go(-1)
forward() 向前跳转，相当于go(1)

screen

作用

测定客户端能力

属性

width 屏幕的像素宽度
height 屏幕的像素高度
availHeight 屏幕的像素高度减系统部件高度之后的值(只读)
availWidth
屏幕的像素宽度减系统部件宽度之后的值(只读)
colorDepth
用于表现颜色的位数(只读)

作者简介：刘晓栋，芦苇科技web前端开发工程师。擅长各类終端官网建设、平台开发、公众号、微信小程序、小游戏，访问 www.talkmoney.cn 了解更多。

BOM学习总结