JavaScript基础——浏览器对象模型(BOM)

浏览器对象模型(BOM)以window对象为依托，表示浏览器窗口以及页面可见区域。

同时，window对象还是ECMAScript中的Global对象，因而所有全局变量和函数都是它的属性，

且所有原生的构造函数及其他函数也都存在于它的命名空间下。BOM的组成部分的主要内容有：

1）在使用框架时，每个框架都有自己的window对象以及所有原生构造函数及其他函数的副本。

   每个框架都保存在frames集合中，可以通过位置或通过名称来访问。

2）有一些窗口指针，可以用来引用其他框架，包括父框架。

3）top对象始终指向最外围的框架，也就是整个浏览器窗口。

4) parent对象表示包含当前框架的框架，而self对象则回值window。

5) 使用location对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性，可以逐级或整体性地修改浏览器的URL。

6）调用replace()方法可以导航到一个新URL,同时该URL会替换浏览器历史记录中当前显示的页面。

7）navigator对象提供了与浏览器有关的信息。到底提供哪些信息，很大程度上取决于用户的浏览器；

   不过，也有一些公共的属性(如userAgent)存在于所有浏览器中。

BOM中还有两个对象：screen和history,但它们的功能有限。screen对象中保存着与客户端显示器有关的信息，

这些信息一般只用于站点分析。history对象为访问浏览器的历史记录开了一个小缝隙，

开发人员可以据此判断历史记录的数量，也可以在历史记录中向后或向前导航到任意页面。

/* * BOM */function cl(x){    console.log(x);}/** *8.1 window对象 *///8.1.1全局作用域var age=29;function sayAge(){    cl(this.age);}cl(window.age);//=>29sayAge();   //=>29window.sayAge();//=>29//全局变量不能通过delete操作符删除，直接在window对象上的定义的属性可以var age2=28;window.color="red";delete window.age2;delete window.color;cl(window.age2);//=>28cl(window.color);//=>undefined//尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在//var newValue=oldValue;//会抛出错误，因为oldValue未定义var newValue=window.oldValue;//不会抛出错误，这是属性查询，newValue的值是undefined//8.1.2 窗口关系及框架//访问某个框架的不同方式//window.frames[1];//window.frames["leftFrame"];//top.frames[1];//top.frames["leftFrame"];//frames[1];//frames["leftFrame"];//8.1.3 窗口位置//跨浏览器取得窗口左边和上边的位置var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.scrollX;var topPos=(typeof window.screenTop=="number")?window.screenTop:window.scrollY;//移动窗口到一个新位置(可能会被浏览器禁用)//将窗口移动到屏幕左上角window.moveTo(0,0);//将窗口向下移动100像素window.moveBy(0,100);//将窗口移动到(200,300)window.moveTo(200,300);//将窗口向左移动50像素window.moveBy(-50,0);//8.1.4 窗口大小//获取页面视口的大小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;    }}//调整浏览器窗口的大小(可能被浏览器禁用)//调整到100*100window.resizeTo(100,100);//调整到200*150window.resizeBy(100,50);//调整到300*300window.resizeTo(300,300);//8.1.5 导航和打开窗口//8.1.5.1 弹出窗口:window.open()var sinaWin=window.open("http://www.sina.com.cn/","_blank","height=400,width=400,top=10,left=10,resizable=yes");//调整大小sinaWin.resizeTo(500,500);//移动位置sinaWin.moveTo(100,100);//关闭新窗口sinaWin.close();cl(sinaWin.opener==window);//true 指向调用window.open()的窗口或框架//8.1.5.2 安全限制//8.1.5.3 弹出窗口屏蔽程序//检测弹出窗口是否被屏蔽了var blocked=false;try{    var baiduWin=window.open("http://www.baidu.com","_blank","height=600,width=600,top=100,left=100,resizable=yes");    if(baiduWin==null){        blocked=true;    }}catch(ex){    blocked=true;}if(blocked){    alert("弹出窗口被浏览器内置的屏蔽程序阻止了");}//8.1.6//间歇调用和超时调用:setTimeout()、setInterval()//设置超时调用var timeoutId=setTimeout(function(){    baiduWin.close();},3000);//取消超时调用clearTimeout(timeoutId);var num=0;var max=10;var intervalId=null;function incrementNumber(){    num++;    //如果执行次数达到了max设定的值，则取消后续尚未执行的调用    if(num==max){        clearInterval(intervalId);        alert("结束");    }}intervalId=setInterval(incrementNumber,500);//8.1.7 系统对话框 alert()、confirm()、prompt()、find()、print()if(confirm("你确定要参加吗？")){    alert("你确定了参加此次活动");}else{    alert("你取消了参加此次活动");}var result=prompt("请输入您的姓名","Jason");if(result!==null){    alert("欢迎你，"+result);}//显示"查找"对话框window.find();//显示"打印"对话框window.print();

/* * BOM */function cl(x){    console.log(x);}/** *8.2 location对象 *///location对象既是window对象的属性，也是document对象的属性cl(location.hash);      // (空字符串)cl(location.host);      // localhost:63342cl(location.hostname);  // localhostcl(location.href);      // http://localhost:63342/IDEA-workspace/JsHigh_book/L08/l08.htmlcl(location.pathname);  // /IDEA-workspace/JsHigh_book/L08/l08.htmlcl(location.port);      // 63342cl(location.protocol);  // http:cl(location.search);    // (空字符串)//8.2.1 查询字符串参数//解析查询字符串，然后返回包含所有参数的一个对象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]);//解码被编码过的name        value=decodeURIComponent(item[1]);//解码被编码过的value        if(name.length){            args[name]=value;        }    }    return args;}//假设查询字符串是 ?q=javascript&num=10var args=getQueryStringArgs();args["q"];      //"javascript"args["num"];    //"10"//8.2.2 位置操作//改变浏览器的位置 location.assign("http://www.baidu.com/"); window.location="http://www.sina.com.cn/"; location.href="http://www.taobao.com/"; //最常用//调用replace()方法，禁用后退按钮，让用户不能返回前一个页面setTimeout(function(){    location.replace("http://www.qq.com/");},1000);//reload():重新加载当前显示的页面location.reload();//重新加载(有可能从缓存中加载)location.reload(true);//重新加载(从服务器重新加载)

/* * BOM */function cl(x){    console.log(x);}/** *8.3 navigator对象 */cl(navigator.appCodeName);  //=>Mozillacl(navigator.appName);      //=>Netscapecl(navigator.appVersion);   //=>5.0 (Windows)cl(navigator.cookieEnabled);//=> truecl(navigator.javaEnabled());//=>falsecl(navigator.language);     //=>zh-CNcl(navigator.mimeTypes);    //=> MimeTypeArraycl(navigator.onLine);       //=>truecl(navigator.platform);     //=>Win32cl(navigator.plugins);      //=> PluginArraycl(navigator.product);      //=>Geckocl(navigator.productSub);   //=>20100101cl(navigator.systemLanguage);//=>undefinedcl(navigator.userAgent);    //=>Mozilla/5.0 (Windows NT 6.1; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0cl(navigator.userLanguage); //=>undefined//8.3.1 检测插件//在W3C浏览器中检测插件的方法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浏览器中检测插件的方法function hasIEPlugin(name){    try{        new ActiveXObject(name);        return true;    }catch(ex){        return false;    }}//检测所有浏览器中的Flashfunction hasFlash(){    var result=hasPlugin("Flash");    if(!result){        result=hasIEPlugin("ShockwaveFlash.ShocksaveFlash");    }    return result;}cl(hasFlash());//=>true//8.3.2 注册处理程序(html5内容)//将一个站点注册为处理RSS阅读器源的处理程序//navigator.registerContentHandler("application/rss+xml","http://www.somereader.com?feed=%s","Some Reader");//将一个应用程序注册为默认的邮件客户端//navigator.registerProtocoHandler("mailto","http://www.163.com?cmd=%s","Some Mail Client");/** * 8.4 screen对象 */cl(screen.availHeight); //=>1040cl(screen.availWidth);  //=>1920cl(screen.availTop);    //=>0cl(screen.availLeft);   //=>0cl(screen.colorDepth);  //=>24cl(screen.height);      //=>1080cl(screen.width);       //>1920/** * 8.5 history对象 *///后退一页history.go(-1);//前进一页history.go(1);//前进两页history.go(2);//跳转到最近的baidu.com页面history.go("baidu.com");//后退一页history.back();//前进一页history.forward();//检测用户是否一开始就打开了你的页面if(history.length==0){    cl("这是用户打开的第一个窗口");}