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);//=>29
sayAge();   //=>29
window.sayAge();//=>29
//全局变量不能通过delete操作符删除，直接在window对象上的定义的属性可以
var age2=28;
window.color="red";
delete window.age2;
delete window.color;
cl(window.age2);//=>28
cl(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*100
window.resizeTo(100,100);
//调整到200*150
window.resizeBy(100,50);
//调整到300*300
window.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:63342
cl(location.hostname);  // localhost
cl(location.href);      // http://localhost:63342/IDEA-workspace/JsHigh_book/L08/l08.html
cl(location.pathname);  // /IDEA-workspace/JsHigh_book/L08/l08.html
cl(location.port);      // 63342
cl(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=10
var 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);  //=>Mozilla
cl(navigator.appName);      //=>Netscape
cl(navigator.appVersion);   //=>5.0 (Windows)
cl(navigator.cookieEnabled);//=> true
cl(navigator.javaEnabled());//=>false
cl(navigator.language);     //=>zh-CN
cl(navigator.mimeTypes);    //=> MimeTypeArray
cl(navigator.onLine);       //=>true
cl(navigator.platform);     //=>Win32
cl(navigator.plugins);      //=> PluginArray
cl(navigator.product);      //=>Gecko
cl(navigator.productSub);   //=>20100101
cl(navigator.systemLanguage);//=>undefined
cl(navigator.userAgent);    //=>Mozilla/5.0 (Windows NT 6.1; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0
cl(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;
    }
}
//检测所有浏览器中的Flash
function 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); //=>1040
cl(screen.availWidth);  //=>1920
cl(screen.availTop);    //=>0
cl(screen.availLeft);   //=>0
cl(screen.colorDepth);  //=>24
cl(screen.height);      //=>1080
cl(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("这是用户打开的第一个窗口");
}