继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

浏览器对象模型BOM

MYYA
关注TA
已关注
手记 430
粉丝 75
获赞 326

总览

  • BOM

    • 全局作用域

    • 窗口

    • 间歇调用和超时调用

    • window对象

    • location对象

    • navigator对象

    • screen对象

    • history对象

window对象

这是BOM的核心

1.全局作用域

在全局作用域中声明的变量、函数都是window的属性和方法

var age = 29;function sayAge(){
alert(this.age);
}
alert(window.age); //29sayAge(); //29window.sayAge(); //29

全局变量不能用delete删除,但是直接在window上定义的属性可以

var age = 29;window.color = "red";//在IE < 9 时抛出错误,在其他所有浏览器中都返回falseconsole.log(delete age);//在IE < 9 时抛出错误,在其他所有浏览器中都返回truedelete window.color; //returns trueconsole.log(age); //29console.log(window.color); //undefined

2.窗口
window.frames中保存着框架的集合

  • 窗口位置
    screenLeft 和screenTop 属性,分别用于表示窗口相对于屏幕左边和上边的位置。
    跨浏览器取得窗口左边和上边的位置

var leftPos = (typeof window.screenLeft == "number") ?window.screenLeft : window.screenX;var topPos = (typeof window.screenTop == "number") ?window.screenTop : window.screenY;
  • 窗口大小
    4 个属性:innerWidth、innerHeight、outerWidth 和outerHeight。不同的浏览器返回的值有所不同。在IE9+、Safari 和Firefox中,outerWidth 和outerHeight 返回浏览器窗口本身的尺寸(无论是从最外层的window 对象还是从某个框架访问)。在Opera 中,这两个属性的值表示页面视图容器的大小。而innerWidth 和innerHeight则表示该容器中页面视图区的大小(减去边框宽度)。在Chrome 中,outerWidth、outerHeight 与innerWidth、innerHeight 返回相同的值,即视口(viewport)大小而非浏览器窗口大小。在IE6 中,这些属性必须在标准模式下才有效;如果是混杂模式,就必须通过document.body.clientWidth 和document.body.clientHeight 取得相同信息。
    跨浏览器获取页面视口的大小

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;
}
}
  • 导航和打开窗口
    window.open(url)在新窗口中打开连接

var wroxWin=window.open("http://www.wrox.com/","_blank","height=400,width=400,top=10,left=10,resizable=yes");

wroxWin.opener = null;禁止老窗口和新窗口通信

2.location对象

提供与当前窗口中加载文档有关的信息,还提供了一些导航功能。location对象既是window的属性也是document对象的属性。window.location和document.location指向同一个对象。location姑且认为是URL。

  • 查询字符串参数
    查询字符串参数的栗子。借助location.search获取到URL[?s=b&v=f...#)之间的内容('['取,')'不取)

function getQueryStringArgs(){//取得查询字符串并去掉开头的问号var qs = (location.search.length > 0 ? location.search.substring(1) : ""),//保存数据的对象args = {},//取得每一项items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,//在for 循环中使用i = 0,
len = items.length;//逐个将每一项添加到args 对象中for (i=0; i < len; i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);if (name.length) {
args[name] = value;
}
}return args;
}
  • 位置操作
    location很多方式可以改变浏览器的位置,assign(url)方法在浏览器中生成一条记录,可以使用后退按钮导航到前一个页面。但是replace(url)方法不能后退到前一个页面。reload()作用是重新加载当前显示的页面

location.assign(''http://www.baidu.com")//下面两句相当于隐式调用assign()方法。window.location=''http://www.baidu.com"location.href=''http://www.baidu.com"//不能后退到前一个页面location.replace(''http://www.baidu.com")

navigator对象

提供浏览器详细信息

  • 检测插件
    对于非IE 浏览器,可以使用plugins 数组来达到这个目的。该数组中的每一项都包含下列属性。

  • name:插件的名字。

  • description:插件的描述。

  • filename:插件的文件名。

  • length:插件所处理的MIME 类型数量。

//非IE
  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 中检测插件的唯一方式就是使用专有的ActiveXObject 类型,并尝试创建一个特定插件的实例。IE 是以COM对象的方式实现插件的,而COM对象使用唯一标识符来标识。因此,要想检查特定的插件,就必须知道其COM标识符。

function hasIEPlugin(name){  try{    new ActiveXObject(name)    return true
  }catch(ex){    return false
  }
}

screen对象

提供用户显示器分辨率详细信息

history对象

保存在用户历史记录信息。

//后退一页history.go(-1);//前进一页history.go(1);//前进两页history.go(2);//跳转到最近的wrox.com 页面history.go("wrox.com");//跳转到最近的nczonline.net 页面history.go("nczonline.net");//后退一页history.back();//前进一页history.forward();

history 对象还有一个length 属性,保存着历史记录的数量。

if (history.length == 0){//这应该是用户打开窗口后的第一个页面}

webp

参考资料:JavaScript高级程序设计(第3版)



作者:fenerchen
链接:https://www.jianshu.com/p/02dac52fedbf


打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP