JavaScript-BOM

Posted 2020-09-30 富坚老贼

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.一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

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