js 高程学习总结 第八章

BOM

浏览器对象模型

1. window对象
   全局作用域
   所有在全局作用域中声明的变量、函数都会成为window对象的属性和方法
   尝试未声明的变量会抛出错误，但是通过window对象，可以知道某个可能未声明的变量是否存在var newValue = window.oldValue
   窗口关系及框架
   窗口位置
   由于兼容性问题，使用下列代码跨浏览器取得窗口左边和上边的位置。
   var leftPos = ( typeof window.screenLeft == “number”)? window.screenLeft : window.screenX;
   var topPos = ( typeof window.screenTop == “number”)? window.screenTop : window.screenY;
   由于浏览器计算基准不同， 无法在跨浏览器的情况下取得窗口左边和上边的精确坐标值，但使用moveTo（）和moveBy（）方法倒是有可能就将窗口精确移动到新位置；接收参数，moveTo 接收新位置的x和y坐标值，moveBy 接收的是在水平和垂直方向上移动的像素数
   但是被禁用了（opera和ie7及更高版本），并且不适用于框架，只能对最外层window对象使用
   窗口大小
   页面视口的大小（无法确定浏览器窗口本身大小，浏览器兼容性问题）
   就

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;
    }
}

resizeTo()和resizeBy()方法可以调整浏览器窗口的大小，这两个方法就收两个参数，resizeTo接收浏览器窗口的新宽度和新高度；
resizeBy 接收新窗口与原窗口的宽度和高度差（但是这两个方法在opera和ie7更高版本被禁用了，同样不适用于框架，而只能对最外层window对象使用）
导航和打开窗口
window.open()方法既可以导航到一个特定url，可以打开一个新的浏览器窗口，这个方法会 接收四个参数：要加载的url，窗口目标，一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值；通常只须传递第一个参数，最后一个参数只在不打开新窗口时使用；
如果传递第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的url；第二个参数也可以是 _self、_parent、_top、_blank

window.open("http://www.wrox.com/","topFrame")

如果第二个参数不是一个已经存在的窗口或框架，那么该方法就会根据第三个参数位置上传入的字符串创建一个新窗口或新标签页，如果没有第三个参数，就会打开一个带有默认设置的新窗口；第三个参数是一个逗号分隔的设置字符串如

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

window.open(); 会返回一个指向新窗口的引用，可以通过该引用使用close（）方法关闭新打开的窗口，仅适用于window.open()打开的窗口；

安全限制
弹出窗口屏蔽程序

var blocked = false;
try{
    var wroxWin = window.open("http://www.wrox.com","_blank");
    if(wroxWin == null){
        blocked = true;
    }
}catch(ex){
    blocked = true;
}
if(blocked){
    console.log("the popup was blocked");
}

间歇调用和超时调用

setTimeout(function(){
    console.log("sdfsdf");
}, 1000);

调用setTimeout返回一个ID，表示超时调用，可以通过它来取消超时调用，clearTimeout(timeoutId)

setInterval(function(){
    console.log("hello world!")
},1000);

会返回间歇调用id，将来可以取消间歇调用，clearInterval(intervalId);
系统对话框
可以调用对话框的方法：alert（）、confirm（）、prompt（）来显示消息，
window.find();//查找
window.print();//打印

var result = prompt("what is you name ?","");
if (result != null){
    console.log("welcome "+ result);
}

location 对象

location 属性

属性名	例子
hash	“#contents”,#号后跟0或多个字符
host	“www.wrox.com:80”
hostname	“www.wrox.com”
href	“http://www.wrox.com”
pathname	“/WileyCDA”返回url的目录和文件名
port	“8080”
protocol	“http:”
search	“?q=javascript”

查询字符串参数

function getQueryStringArgs(){
    var qs = (location.search.length > 0? location.search.substring(1):""),
    args = {},
    items = qs.length?qs.split("&"):[],
    item = null,
    name = null,
    value = null,
    i = 0,
    len = items.length;

    for(i=0li<len;i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);

        if(name.length){
            args[name] = value;
        }
    }
    return args;
}

位置操作
location.assign(“http://www.baidu.com“);
与下列两行代码与显示调用assign 效果完全一样
window.location = “http://www.baidu.com“;
location.href = “http://www.baidu.com“;

location.href 最常用的改变浏览器位置的方法
location.reload();//重新加载（有可能从缓存中加载）
location.reload(true);//重新加载（有服务器重新加载）

navigator 对象

检测插件
对于非IE浏览器，可以使用plugins数值来达到这个目的，数组中每一项都包含以下属性：name（插件名字）、description（插件描述）、filename（插件文件名）、length（插件所处理的MIME类型数量）

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;
}
console.log("hasPlugin("flash")")

//检测IE中的插件
function hasIEPugin(name){
    try {
        new ActiveObject(name);
        return true;
    }catch (ex){
        return false;
    }
}

console.log(hasIEPlugin("ShockwaveFlash.ShockwaveFlash");

由于两种方法差距太大，因此典型做法是针对每个插件分别创建检测函数（插件名，在每种方法中不同）

注册处理程序

screen对象

history对象

history.go(-1);后退一页
history.go(1);前进一页
history.go(2);前退两页
history.go(“wrox.com”)//跳转最近的wrox.com页面
back()//后退一页；forward();//前进一页