JavaScript学习-window对象_configurablewindow-优快云博客

本文链接：https://blog.youkuaiyun.com/theroadofprogrammers/article/details/69663512

1，介绍

BOM介绍
- ECMAScript是JavaScript的核心，如果要在Web中使用JavaScript，那么BOM（浏览器对象模型）则无疑才是真正的核心。
- BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页无关。
- 浏览器提供商会按照各自的想法区扩展它，于是，浏览器之间共有的对象就成了事实上的标准。
- W3C为了把浏览器中JavaScript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范中。
Window介绍
- BOM的核心对象是window，它表示浏览器的一个实例。
- 在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象，变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。

2，全局作用域

使用var语句添加的window属性有个名为[Configurable]特性为false，所以全局变量不能通过delete操作符删除，而直接在window对象行的定义的属性可以。例如：

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对象，可以知道某个未声明的变量是否存在。例如：

//这里会抛出错误，因为 oldValue未定义
var newValue = oldValue;

//这里不会抛出错误，因为这是一次属性查询
//newValue的值是undefined
var newValue = window.oldValue;

3，窗口关系及框架

简介
- 如果页面中包含框架，则每个框架都有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引(从0开始，从左至右，从上到下)或者框架name来访问相应的window对象。
- 每个window对象都有一个name属性，其中包含框架的名称
访问框架的方式
- top对象始终指向最高(最外)层的框架，也就是浏览器的窗口。
  - 代码示例
  - 下图展示了在最高层的窗口中，通过代码来访问前面例子中每个框架的不同方式。
- 与top相对的另一个window对象是parent。顾名思义，parent（父）对象始终指向当前框架的直接上层框架。在某些情况下，parent有可能等于top;在没有框架情况下，parent一定等于top（此时它们都等于window）。
  - 代码示例
  - 使用parent和top访问框架的图示

4，窗口位置

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

var leftPos = (typeof window.screenLeft == "number")?window.screenLeft : window.screenx;

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

moveTo()和moveBy()
- 都接收两个参数
  moveTo()接收的是新位置的x和y坐标值，moveBy()接收的是水平和垂直方向上移动的像素数。
```
window.moveTo(0,0);//将窗口移动到屏幕上左上角
window.moveBy(0,100);//将窗口向下移动到100像素 
window.moveTo(200,300);//将窗口移动到(200,300) 
window.moveBy(-50,0);//将窗口向左移动50像素 
```
- 注：这两个方法可能会浏览器禁用，而且，在Opera和IE7（及更高版本）中默认就是禁用的。
- 这两个方法不适用于框架，只能对最外层的window对象使用。

5，窗口大小

取得页面视口的大小。

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

if(typeof pageWidth ! = "number"){
    if(document.compatMode == "CSS1Compat"){
        pageWidth = docment.documentElement.clientWidth;
        pageHeight = docment.documentElement.clientHeight;
    }else{
        pageWidth = document.body.clientWidth;
        pageHeigth = document.body.clientHeight;
    }
}

调整浏览器窗口的大小
- resizeTo()和resizeBy()
  - 接收两个参数
    resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽度和高度之差。
- 注：这两个方法可能会浏览器禁用，而且，在Opera和IE7（及更高版本）中默认就是禁用的。
- 这两个方法不适用于框架，只能对最外层的window对象使用。

6，导航和打开窗口

window.open()
这个方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口，这个方法接收4个参数，如下
- 要加载的URL
- 窗口目标
  - 如果传递了第二个参数，而且该参数是已有窗口和框架的名称，那么就会在具有该名称的窗口和框架中加载第一个参数指定的URL。
```
//等同于< a href="http://www.wrox.com" target="topFrame"></a>
window.open("http://www.wrox.com/"),"topFrame");
```
    - 第二个参数也可以是一下任何一个特殊的窗口名称：_self,_parent,_top或_blank
  - 如果传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签。如果没有传入第三个参数，那么就会打开一个带有全部默认设置（工具栏，地址栏和状态栏等）的新浏览器窗口（或者打开一个新标签页-根据浏览器设置）。在不打开新窗口的情况下，会忽略第三个参数。
- 一个特性字符串
  - 这个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示那些特性。下表列出了可以出现这个字符串中的设置选项。
  - 代码示例
```
window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizeable=yes");
```
- 表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

window.open()返回值
返回一个指向新窗口的引用。引用的对象与其他window对象大致相似，但我们可以对其进行更多的控制。

示例

var wroxWin = window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizeable=yes");
//调整大小
wroxWin.resizeTo(500,500);
//移动位置
wroxWin.moveTo(100,100);

window.close()方法
这个方法仅适用于通过window.open()打开的弹出窗口。对于浏览器的主窗口，如果没有得到用户的允许是不能关闭它的。
window对象的opener属性
保存着打开它的原始窗口对象。
弹出窗口屏蔽程序
用户可以将绝大多数不想看到的弹出窗口屏蔽掉，在弹出窗口被屏蔽时，应该考虑两种可能
- 如果是浏览器内置的屏蔽程序阻止的弹出窗口
  window.open()返回null。此时检测这个返回值就可以确定弹出窗口是否被屏蔽
- 如果是浏览器扩展或其他程序阻止的弹出窗口
  必须在检测返回值得同时，将对window.open()的调用封装在一个try-catch块中
```
var blocked = false;
try{
    var wroxWin = window.open("http://www.wrox.com","_blank");
    if(wroxWin == null){
        blocked = true;
    }
}catch(ex){
    blocked = true;
}

if(blocked){
    alert("The popup was blocked!");
}
```