（7）JavaScript-BOM（浏览器对象模型）

window 对象

全局作用域

在浏览器中， window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。

所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法

var age = 29;

function sayAge(){

alert(this.age);

}

alert(window.age); //

sayAge(); //

window.sayAge(); //

窗口关系及框架

。。

窗口位置

使用下列代码可以跨浏览器取得窗口左边和上边的位置

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 对象使用

窗口大小

outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸
innerWidth 和 innerHeight则表示该容器中页面视图区的大小（减去边框宽度）

使用 resizeTo()和 resizeBy()方法可以调整浏览器窗口的大小

其中 resizeTo()接收浏览器窗口的新宽度和新高度，而 resizeBy()接收新窗口与原窗口的宽度和高度之差

//调整到 100× 100

window.resizeTo(100, 100);

//调整到 200× 150

window.resizeBy(100, 50);

//调整到 300× 300

window.resizeTo(300, 300);

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

导航和打开窗口

window.open()方法可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口可以接收 4 个参数:
1.要加载的 URL
2.窗口目标
3.一个特性字符串
4.一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用

间歇调用和超时调用

超时调用需要使用 window 对象的 setTimeout()方法

间歇调用的方法是 setInterval()

系统对话框

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

alert("Hello world!")

confirm()方法

为了确定用户是单击了 OK 还是 Cancel，可以检查 confirm()方法返回的布尔值

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()方法

prompt("What's your name?","Michael")

如果用户单击了 OK 按钮，则 prompt()返回文本输入域的值；如果用户单击了 Cancel 或没有单击OK 而是通过其他方式关闭了对话框，则该方法返回 null

var result = prompt("What is your name? ", "");

if (result !== null) {

alert("Welcome, " + result);

}

两个可以通过 JavaScript 打开的对话框，即“查找”和“打印”。这两个对话框都是异步显示的，能够将控制权立即交还给脚本。

这两个对话框与用户通过浏览器菜单的“查找”和“打印”命令打开的对话框相同

//显示“打印”对话框

window.print();

//显示“查找”对话框

window.find();

location 对象

它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能

location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是document 对象的属性.window.location 和 document.location 引用的是同一个对象。

location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将 URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段

navigator 对象

暂略

screen 对象

暂略

history 对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。

history 是 window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的window 对象关联

go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。

负数表示向后跳转（类似于单击浏览器的“后退”按钮），正数表示向前跳转（类似于单击浏览器的“前进”按钮）。

//后退一页

history.go(-);

//前进一页

history.go();

//前进两页

history.go();

//后退一页

history.back();

//前进一页

history.forward();

虽然 history 并不常用，但在创建自定义的“后退”和“前进”按钮，以及检测当前页面是不是用户历史记录中的第一个页面时，还是必须使用它

巴特西

（7）JavaScript-BOM（浏览器对象模型）

window 对象

location 对象

navigator 对象

screen 对象

history 对象

最新文章

热门文章

巴特西

（7）JavaScript-BOM（浏览器对象模 型）

window 对象

location 对象

navigator 对象

screen 对象

history 对象

最新文章

热门文章

（7）JavaScript-BOM（浏览器对象模型）