BOM概念，window对象，打开关闭窗口，窗口定位-04

2016-09-12-pm day03

1.BOM

什么是BOM( Browser Object Model): BOM是专门操作浏览器的API,也称之浏览器对象模型。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
以下是BOM对象模型，其中document分支及以下内容属于DOM,它们是用来操作网页内容的。DOM在之前介绍过，这里不做解释。
- window对象: 充当两个角色
  1). 代替global，充当全局对象(window对象是js中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。)
  2). 封装操作浏览器窗口的API
- history对象: 保存当前窗口打开后成功访问过的url的历史记录栈
- navigator对象: 保存浏览器配置信息
- location对象: 保存当前窗口正在打开的url的对象
- screen对象: 保存当前显示器或桌面分辨率信息
- event对象: 在事件发生时，自动保存事件相关信息的对象

2. 打开和关闭窗口:

window.open() 打开，window.close()关闭当前窗口
打开超链接的方式总结: (url:要打开的地址,target:新窗口的位置,name:)
1). 在当前窗口打开新链接，可后退

html: <a href="url"></a>
js: window.open("url","_self")

2). 在当前窗口打开新链接，不可后退

js:  window.location.replace("url");

3). 在新窗口打开新链接，可打开多个

html: <a href="url" target="_blank"></a>
js:  window.open("url")

4). 在新窗口打开新链接，只能打开一个窗口
（原理：内存中，每个窗口都有一个唯一的名字name属性。 name属性是在内存中唯一标识一个窗口的名称）
浏览器规定: 相同name的窗口的只能打开一个，后打开的会刷新先打开的。
在打开新窗口时，可自定义name属性
预定义name属性值: _self _blank ...

html: <a href="url" target="name"></a>
js:  window.open("url","name")

以下是代码例子：
html中

<a href="http://www.baidu.com">在当前窗口打开，可后退</a><br>
<a href="javascript:open1()">在当前窗口打开，可后退(js)</a><br>

<a href="javascript:open2()">在当前窗口打开，不可后退(js)</a><br>

<a href="http://www.baidu.com" target="_blank">在新窗口打开，可打开多个</a><br>
<a href="javascript:open3()">在新窗口打开，可打开多个(js)</a><br>

<a href="http://www.baidu.com" target="baidu">在新窗口打开，只能打开一个</a><br>
<a href="javascript:open4()">在新窗口打开，只能打开一个(js)</a><br>

js中：

function open1(){
   window.open("http://www.baidu.com","_self");
}
function open2(){
   window.location.replace("http://www.baidu.com");
}
function open3(){
   window.open("http://www.baidu.com");
}
function open4(){
   window.open("http://www.baidu.com","baidu");
}

3. 窗口大小和窗口定位(了解):

1)窗口大小:

获取窗口大小:
1)). 获取完整窗口大小: window.outerWidth/ window.outerHeight
2)). 获得文档显示区大小: window.innerWidth/ window.innerHeight

image.png
修改窗口大小:
1. 在打开窗口时，就可定义新窗口的大小和位置:
  2步:
  1.定义配置字符串:
  var config="top=?,left=?,width=?,height=?"
  //只是文档显示区的大小
  1. 打开窗口时，传入配置字符串
    open("url","name",config);
2. 通过API调整窗口大小:
  resizeTo(width,height)
  width/height定义的是完整大小
  resizeBy(width的增量,height的增量)
  强调:
3. 只能修改在打开时，就修改了位置和大小的弹出窗口
4. 无法修改当前窗口自己的大小
  通过一个窗口修改另一个窗口的大小

2)窗口定位:

获取窗口左上角定位:
window.screenLeft||window.screenX
window.screenTop||window.screenY
修改窗口的位置:
moveTo(x,y);
moveBy(x的增量,y的增量)

练习:
1. 屏幕的大小:
完整大小: screen.height screen.width
去掉任务栏之后的剩余大小:
screen.availHeight screen.availWidth
2. 事件发生时，鼠标的位置:
e.screenX; 相对于屏幕左上角的x坐标
e.screenY; 相对于屏幕左上角的y坐标

BOM概念，window对象，打开关闭窗口，窗口定位-04