BOM

Author Avatar
LI Liangmin 8月 03, 2017

JS由ECMAScript、DOM、BOM,在浏览器中BOM是核心。以前BOM并无标准,基于浏览器之间的互操作性,存在许多共通的地方。

window 对象

window对象既是js操作浏览器的接口,也是全局对象。它有许多好用的函数:parseInt()、parseFloat()、setTimeout()、setInterval()
getComputedStyle()、encodeURIComponent()、decodeURIComponent()、alert()、confirm()、prompt()、isFinite()、isNaN()等方法可以在页面中直接使用。

全局作用域

严格模式下函数调用方式的this为undefined,非严格模式下是window。页面中定义的全局的函数、变量等直接作为window的属性,但是[[configurable]]=false
也就是说不能直接用delete window.x的方式删除。而直接设定的window属性可以删除。若未申明变量就引用会报错,但是不存在的属性通过window的方式就
返回undefined。

window对象有document\location\history\navigator\screen等属性。windows mobil平台IE不支持直接在window对象中添加属性。

窗口关系及框架

每个窗口、框架、或是打开的标签都拥有window对象,且对象之间是相互独立的。框架层次上有self、parent、top。最外层的window对象可用框架集frames用
索引或是框架名称的方式访问框架。框架集中含有的其中的name属性值可以是target中值,从而在哪个框架中打开。window对象
有许多层次,如:window.parent.parent.frames可以到top的框架集。由于不同框架之间的window对象互不相关,所以在框架间传递的对象使用instanceof方法存在问题。
instanceof方法在自身的window对象下的原型链中实施。

窗口位置。

  1. window.screenLeft/window.screenTop 除firefox均支持
  2. window.screenX/window.screenY firefox等的方式。

以上两种方式不同浏览器在计算上有所不同。最终的结果就是无法跨浏览器或的浏览器窗口左上角的位置。但是moveTo()、moveBy()可以在弹窗中移动位置,而
主要的窗口却会被禁。

窗口大小

window.outterHeight和window.outterWidth在浏览器上存在差异,chrome的window.innerWidth与window.outterWidth同。无法跨浏览器获得窗口大小。但可以获得页面视口大小。
可用resizeTo()、resizeBy()调整,但是可能被禁。

            var pagewidth = window.innerWidth, pageheight = window.innerHeight;
                    if (typeof pagewidth !== "number") {
                    if (document.compatMode == "CSS1Compat") {
                    pagewidth = document.documentElement.clientWidth;
                    pageheight = document.documentElement.clientHeight;
             } else {
            pagewidth =  document.body.clientWidth;
            pageheight =  document.body.clientHeight;
                 }
            }

在移动端上:

       可见视口:
         var width = window.innerWidth;     
         var height = window.innerHeight;
      IE:
        var width = document.documentElement.clientWidth; 
        var height = document.documentElement.clientHeight;

     布局视口:
        var width = document.documentElement.clientWidth;;     
        var height = document.documentElement.clientHeight;
      IE:
         pagewidth =  document.body.clientWidth;
         pageheight =  document.body.clientHeight;

导航和打开窗口

window.open(url,name,feature,boolean);在不打开窗口下,boolean表示是否取代当前的历史记录。window.open返回指向新窗口对象的引用。含有opener和
closed属性。opener指向打开它的对象。

安全限制:存在浏览器内置程序或是插件阻止弹窗插件阻止返回null,插件阻住可能抛出错误。

 var blocked = false;
try {
 var a = window.open("http://example.com");
 if (a == null) {
 blocked = true
   }
 }  catch (err) {
       blocked = true;
 } 

间歇调用和超时调用

二者均有唯一ID可结束执行,推荐用setTimeout()模拟setInterval();setInterval()可能在前个调用未完成时就开始了。两个函数的第一个参数不推荐用字符串。

系统对话框

window.alert()\confirm()返回布尔值\prompt()返回null或是字符串。它们是同步模态的。一次操作打开两个以上的对话框会在第二个后有复选框来确认后需屏蔽。
空闲时会将对话框计数器清零。

location对象

用于获得文件信息或是url信息,有:protocol、search、href、host、hostname、pathname、hash、port。

提取查询字符串信息:
function querysearch () {
var qs = (location.search.length > 0 ) : location.search.substring(1) : “”;
var args = {};
var name.value,len,item,con;
var items = qs.split(“&”);
len = items.length;
for (var i = 0; i < len;i ++) {
con = items[i].split(“=””);
name = con[0].value = con[1];
if (name && args[name] == undefined) {
args[name] = value;
}
}
return args;
}

通过location.href可以到另一页面,但是有历史记录。可使用location.replace()。这样就不会有记录。location.reload()重新加载。

用于了解浏览器的信息。

插件

navigator.plugins是个集合,含有refresh()方法,反映最新安装插件情况,可选布尔值来说明是否要刷新页面。
每项有name\description\filename\length.

  function hasPlugin (name) {
    name = name.toLowerCase();
    for (var i =0 ; i < navigator.plugins.length; i++) {
       if (navigator.plugins[i].name.toLowerCase().indexOf(name) !== -1) {
          return true;
        }
      } 
     return false; 
  }

  IE浏览器: name为COM标识
  function hasIEPlugins (name) {
     try {
          new ActiveXObject(name);
          return true; 
     } catch (err) {
          return false;
       }
  }

注册处理程序

navigator.registerContentHandler()/navigator.registerProtocolHandler(),支持3种MIME类型。

screen 对象

有用的是其中的screen.availWidth和屏幕大小的screen.width的像素值。

history对象

每个window对象含有history属性,保存实际的浏览历史记录。但是不能获得浏览过的URL,可以通过go()\back()\forward()方式实现改动。
history.go()的负数值表示后退.其中的length表示记录数,第一次进入值为0.