BOM相关

BOM相关

• BOM体系结构图：
  

window对象（BOM核心对象，表示浏览器的一个实例）

1、window既是js访问浏览器窗口的一个接口，也是ECMAScript规定的global对象
2、BOM作用： 控制窗口、框架、和弹出窗口，利用location对象中的页面信息、使用navigator对象了解浏览器、screen对象以及history对象

• 全局作用域（在全局作用域中声明的变量和函数都会变成window对象的属性和方法）
• 例子：

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

理解：1、变量age和函数sayAge（）都归于window对象下面
2、可以通过window.age 访问变量 age
3、 window.sayAge() 访问函数
4、sayAge() sayAge() 存在于全局作用域中，因此 this.age 被映射到 window.age

窗口关系及框架

1、在frames集合中，可以通过数值索引或者框架名称来访问window对象，
2、
子窗口访问父窗口——window对象的parent属性
子窗口访问顶层——window对象的top属性

• 一个例子：

理解：把窗口总共分3个框架，上面高160px，剩下的都是下面的框架，（rows=160,*）
下面的框架又分两个框架，左右各占50%(cols=“50%,50%”),如图：

• top 对象始终指向最高（最外）层的框架，也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架,因为window对象在代码中指向的不是最高层框架而是特定实例
• parent对象指向当前框架的直接上层框架（即双亲就是上一级）

在某些情况下， parent 有可能等于 top ；但在没有框架的情况下， parent 一定等于top （此时它们都等于 window ）

• self对象指向window

窗口位置和大小（可以类比于python的turtle库）

• 窗口位置

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

1、 通过上面这段代码可以取得窗口左边和上边的位置（和python的海龟库的turtle.setup的后两个参数是获取窗体相对于屏幕的左上角的位置可以类比）
2、用二元操作符（条件表达式）是因为有些浏览器是不支持screenLeft/Top属性的

• 使用moveTo(新位置的x,y坐标)和moveBy(水平和垂直的像素数)可以将窗口移动到一个新位置，例子如下：

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

• 使用resizeTo(浏览器窗口的新宽度和新高度)和resizeBy(新窗口与原窗口的宽度和高度之差)，例子如下：

//调整到 100×100
window.resizeTo(100, 100);
//调整到 200×150
window.resizeBy(100, 50);

导航和打开窗口

• window.open() 方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口
  • 可以接收 4 个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览
    器历史记录中当前加载页面的布尔值。通常只须传递第一个参数

间歇调用和超时调用

JavaScript 是单线程语言，(线程是程序中一个单一的顺序控制流程)，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行

• 超时调用：使用 window 对象的 ==setTimeout()==方法
  • 2个参数：要执行的代码和以毫秒表示的时间

setTimeout(function() {
alert("Hello world!");
}, 1000);

1、其实也可以在第一个参数传入字符串，但因为传递字符串可能会导致性能损失所以尽量用函数
2、只要是在指定的时间尚未过去之前调用 clearTimeout() ，就可以完全取消超时调用
3、 第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。因此经过该时间后制定的代码不一定会执行

• 间歇调用： setInterval() ，接受的参数与 setTimeout() 相同

1、取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载
2、后一个间歇调用可能会在前一个间歇调用结束之前启动所以尽量不要用间歇

系统对话框

• 1、alert() 警告
  • 单击“确定”来继续
• 2、confirm() 确认
  • 当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。
• 3、prompt()提示
  • 当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL

location对象

它既是 window 对象的属性，也是 document 对象的属性

• 1、该对象的一些属性见图：
  

• 2、location对象可用来查询字符串参数

• 3、location对象可用来改变浏览器的位置

  • 使用assign() 方法并为其传递一个 URL

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

这样，就可以立即打开新 URL 并在浏览器的历史记录中生成一条记录,等同于：

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

• 4、 调用 replace() 方法可以导航到一个新 URL，同时该 URL 会替换浏览器历史记录中当前显示的页面。（意思就是：用户不能回到前一个页面）

navigator对象

• navigator 对象的属性通常用于检测显示网页的浏览器类型（就像发送请求时捕捉到的头部信息里的user-agent）
  

screen对象

• 保存着与客户端显示器有关的信息，这些信息一般只用于站点分析

history对象

• 为访问浏览器的历史记录开了一个小缝隙，可以据此判断历史记录的数量，也可以在历史记录中向后或向前导航到任意页面

//后退一页
history.go(-1);
//前进一页
history.go(1);
//跳转到最近的 w.com 页面
history.go("w.com");