JS BOM

window 对象

https://developer.mozilla.org/zh-CN/docs/Web/API/Window

全局作用域

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

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

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

 

窗口关系及框架

。。

窗口位置

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

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(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);

 

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

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