DOM-浏览器对象

window对象方法

window对象方法

• 1、一个浏览器窗口就是一个window对象；
• 2、window对象是最核心的对象，document对象、history对象等都是window对象的子对象

打开和关闭窗口

• 在JavaScript中，我们可以使用window对象中的open()方法来打开一个新窗口

语法：window.open(URL, 窗口名称, 参数);

说明：

• URL：指的是打开窗口的地址，如果URL为空字符串，则浏览器打开一个空白窗口，并且可以使用document.write()方法动态输出HTML文档。
• 窗口名称：指的是window对象的名称，可以是a标签或form标签中target属性值。如果指定的名称是一个已经存在的窗口名称，则返回对该窗口的引用，而不会再新打开一个窗口。

• 参数：对打开的窗口进行属性设置

  
  参数以及说明
• 此外还需要注意一点，window.open()方法中的参数width和height设置的时候是不需要加单位（px）的，浏览器默认就已经给我们添加单位

JavaScript关闭窗口

• 在JavaScript中，我们可以使用window对象中的close()方法来关闭一个窗口
• 在JavaScript中，如果想要关闭当前的窗口，有3种方式：
• 1、关闭当前窗口

window.close();
close();
this.close();

• 2、关闭子窗口
• 所谓的“关闭子窗口”就是关闭之前使用window.open()方法动态创建的子窗口

语法：窗口名.close();

• 说明：使用window.open()方法动态创建的窗口时，我们可以将窗口以变量形式保存，然后再使用close()方法关闭动态创建的窗口

改变窗口大小

• 在JavaScript中，可以使用window对象的resizeTo()方法或resizeBy()方法来改变窗口的大小

window.resizeTo(x, y)

• x表示改变后的水平宽度，y表示改变后的垂直高度。x和y的单位都是px，浏览器自带单位，我们只需要使用数值即可

window.resizeBy(x, y)

• 当x、y的值大于0时为扩大，小于0时为缩小。其中x和y的单位都是px。
• x表示窗口水平方向每次扩大或缩小的数值，y表示垂直方向窗口每次扩大或缩小的数值。
• resizeTo(x,y)与resizeBy(x,y)不同在于：resizeTo(x,y)中的x、y是“改变后”的数值，而resizeBy(x,y)中的x、y是“增加或减少”的数值。“to”表示一个结果，“by”表示一个过程

窗口历史

• 在JavaScript中，我们使用window对象中的history对象进行访问窗口历史。很多人对“window对象中的history对象”这一句不太理解，其实“对象里面也可以有子对象”的

一、history对象属性

history对象属性

2、history对象方法

history对象方法

• 我们常见的“上一页”与“下一页”实现代码如下：

<a href="javascript:window.history.forward();">下一页</a>
<a href="javascript:window.history.back();">上一页</a>

• 注意一下，这种“上一页”与“下一页”是针对浏览器历史记录而言，不能用来制作类似绿叶学习网那种分页特效。两者是完全不同的概念！

  
  分页效果
• 当然，我们还可以使用hisotry.go()方法指定要访问的历史记录。若参数为正数，则向前移动；若参数为负数，则向后移动，例如：

<a href="javascript:window.history.go(-1);">向后退1次</a>
<a href="javascript:window.history.back(2);">向后前进2次</a>

• 使用history.length属性能够访问history数组的长度，可以很容易地转移到列表的末尾，例如：

<a href="javascript:window.history.length-1;">末尾</a>

• 在JavaScript中，操作窗口历史语法很简单，也不是那么常用。一般情况下，在404页面中，为了用户体验，往往会有一个提供“返回上一页”的选项，这其中就用到了下面这种语法：

<a href="javascript:window.history.go(-1);">返回上一页</a>