高程3总结#第8章BOM

时间 2019-11-08

标签高程总结 bom 繁體版

原文原文链接

BOM

window对象

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对象上的定义的属性能够javascript

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对象，能够知道某个可能未声明的变量是否存在html

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

窗口关系及框架

若是页面中包含框架，则每一个框架都拥有本身的window对象，而且保存在frames集合中java

<html>
  <head>
    <title>Frameset Example</title>
  </head>
  <frameset rows="160,*">
    <frame src="frame.htm" name="topFrame">
    <frameset cols="50%,50%">
      <frame src="anotherframe.htm" name="leftFrame">
      <frame src="yetanotherframe.htm" name="rightFrame">
    </frameset>
  </frameset>
</html>

在使用框架的状况下，浏览器中会存在多个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按钮以外，还会显示一个文本提示域。默认接收两个参数，要显示给用户的文本提示和文本输入域的默认值

location对象

查询字符串参数

建立函数，解析查询字符串，返回包含全部参数的一个对象工具

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。ui
```
location.assign("http://www.wrox.com");
```

下面两行代码与显式调用assign()方法的效果彻底同样this

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

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

注册处理程序

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

screen对象

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

history对象

使用 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){
  //这应该是用户打开窗口后的第一个页面
}