高程3总结#第8章BOM

摘要：对象的核心对象是，它表示浏览器的一个实例。而和则表示该容器中页面视图区的大小。在中，与返回相同的值，即视口大小而非浏览器窗口大小。第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。这应该是用户打开窗口后的第一个页面

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这以为着在网页中定义的任何一个对象、变量和函数，都是以window作为其Global对象，因此有权访问parseInt()等方法。

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

全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以

var age=29;
window.color="red";
//在IE<9时抛出错误，在其他所有浏览器中都返回false
delete window.age;
//在IE<9时抛出错误，在其他所有浏览器中都返回true
delete window.color;//return true
alert(window.age);//29
alert(window.color);//undefined

尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在

//这里会抛出错误，因为oldValue未定义
var newValue=oldValue
//这里不会抛出错误，因为这是一次属性查询
//newValue的值是undefined
var newValue=window.oldValue

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中

在使用框架的情况下，浏览器中会存在多个Global对象。在每个框架中定义的全局变量会自动成为框架中window对象的属性。由于每个window对象都包含原生类型的构造函数，因此每个框架都有一套自己的构造函数，这些构造函数一一对应，但并不相等。

screenLeft()和screenTop()属性，分别用于表示窗口相对于屏幕左边和上边的位置

var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX;
var topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;

moveTo()接收的是新位置的x和y的坐标值，而moveBy()接收的是在水平和垂直方向上移动的像素数

//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗口向下移动100像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动50像素
window.moveBy(-50,0)

这两个方法可能会被浏览器禁用。这两个方法不适用于框架，只能对最外层的window对象使用

在IE9+、Safari和FireFox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸。在Opera中，这两个属性的值表示页面视图容器的大小。而innerWidth和innerHeight则表示该容器中页面视图区的大小。在Chrome中，outerWidth、outerHeight与innerWidth、innerHeight返回相同的值，即视口大小而非浏览器窗口大小。

使用resizeTo()和resizeBy()方法可以调整浏览器窗口的代销。这两个方法都接收两个参数，其中resizeTo()接收浏览器窗口的新宽度和高度，而resizeBy()接收新窗口与原窗口的宽度和高度之差。

//调整到100X100
window.resizeTo(100,100);
//调整到200X150
window.resizeBy(100,50)
//调整到300X300
window,resizeTo(300,300)

这两种方法也有可能被浏览器禁用

window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口

这个方法接收4个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只需传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。

如果为window.open()传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的URL。

如果给 window.open() 传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数，那么就会打开一个带有全部默认设置（工具栏、地址栏和状态栏等）的新浏览器窗口（或者打开一个新标签页根据浏览器设置）。

第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。

允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，后者是每隔指定的时间就执行一次代码。

超时调用setTimeout()，接收两个参数：要执行的代码和以毫秒表示的时间。

间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，它接收的参数与setTimeout()相同

浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示消息。

alert()方法，这个方法接受一个字符串并将其展示给用户。调用alert()方法的结果就是想用户显示一个系统对话框，其中包含指定文本和一个OK("确定")按钮

confirm()方法，像是一个"警告"对话框。除了显示"确定"按钮之外，还会显示一个Cancel("取消")按钮，两个按钮可以让用户决定是否执行给定的操作

if (confirm("Are you sure?")) {
  alert("I"m so glad you"re sure! ");
} else {
  alert("I"m sorry to hear you"re not sure. ");
}

prompt()方法，生成提示框，用于提示用户输入一些文本。除了显示OK和Cancel按钮之外，还会显示一个文本提示域。默认接收两个参数，要显示给用户的文本提示和文本输入域的默认值

创建函数，解析查询字符串，返回包含所有参数的一个对象

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。

location.assign("http://www.wrox.com");

下面两行代码与显式调用assign()方法的效果完全一样

window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

//假设初始 URL 为 http://www.wrox.com/WileyCDA/
//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1";
//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
location.search = "?q=javascript";
//将 URL 修改为"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com";
//将 URL 修改为"http://www.yahoo.com/mydir/"
location.pathname = "mydir";
//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
location.port = 8080

非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;
}
//检测 Flash
alert(hasPlugin("Flash"));
//检测 QuickTime
alert(hasPlugin("QuickTime"));

registerContentHandler() 和 registerProtocolHandler() 方法。这两个方法可以让一个站点指明它可以处理特定类型的信息。

screen对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素的宽度高度等

使用 go() 方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转（类似于单击浏览器的“后退”按钮），正数表示向前跳转（类似于单击浏览器的“前进”按钮）。

//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);

也可以给 go() 方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置最近。如果历史记录中不包含该字符串，那么这个方法什么也不做，

//跳转到最近的 wrox.com 页面
history.go("wrox.com");
//跳转到最近的 nczonline.net 页面
history.go("nczonline.net");

还可以使用两个简写方法 back() 和 forward() 来代替 go() 。

//后退一页
history.back();
//前进一页
history.forward();

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

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