32°

2020/6/10 JavaScript高级程序设计 BOM

BOM(浏览器对象模型):提供用于访问浏览器的对象。

8.1 window对象

 window是BOM的核心对象,表示浏览器的一个实例。

  • JavaScript访问浏览器窗口的接口
  • ECMAScript规定的Global对象

8.1.1 全局作用域

全局变量会成为window的属性,但是定义全局变量和直接在window对象上定义属性是有差别的——全局变量不能通过delete删除,但window对象上定义的可以

这是因为使用var添加的window属性[[Configurable]]被设置为false(不可删除)。

访问未声明的变量会发生错误,但通过查询window对象,可以知道某个可能未声明的变量是否存在。

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

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

8.1.2 窗口关系及框架

如果页面中包含框架,则每个框架都拥有自己的window对象,并保存在frames集合中。在frames集合中可以通过数值索引/框架名称来访问相应的window对象。每个window对象都有一个name属性,其中包含框架的名称。

PS1:对于最高层窗口来说:除非最高层窗口是通过window.open()打开的,否则其window对象的name属性不会包含任何值。

与框架有关的window对象属性(同时也是对象):

  • top:始终指向最高(最外)层的框架,也就是浏览器窗口。使用它可以正确地在一个框架中访问另一个框架。因为对任意一个框架中的代码来说,window对象指向的都是那个框架的特定实例,而非最高层框架。
  • parent:始终指向当前框架的直接上层框架。在没有框架的情况下,parent等于top。
  • self:始终指向window。引入self的目的仅仅是为了和top和parent对象对应,因此他不包含其他值。

8.1.3 窗口位置

用来确定window对象位置的属性:screenLeft, screenTop / screenX, screenY,分别表示窗口相对于屏幕左边和上边的位置。

两组方法分别支持的浏览器:

screenLeft, screenTop IE、Safari、Opera、Chrome
screenX, screenY Firefox、Safari、Chrome

跨浏览器取得窗口位置的代码

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

缺点:

  • screenTop表示的是由从屏幕上边到window对象表示的页面可见区域的距离(即页面可见区域上方浏览器工具栏的像素高度)。
  • screenY表示整个浏览器窗口相对于屏幕的坐标值(0)。

将窗口精确移动到一个新位置的方法:

  • moveTo():接收最新位置的x,y坐标值。
  • moveBy():接收在水平和垂直方向上移动的像素数。

PS:这两个方法很可能会被浏览器禁用(Opera和IE7+),且不适合框架,只能对最外层window对象使用。

8.1.4 窗口大小

  IE9+、Safari、Firefox Opera Chrome
innerWidth、innerHeight 视图区大小 该容器中页面视图区的大小(减去边框宽度) 视口大小
outerWidth、outerHeight 浏览器窗口本身的尺寸 页面视图容器的大小(单个标签页对应浏览器窗口的大小) 视口大小

document.documentElement.clientWidth / document.documentElement.clientHeight:保存了页面视口的信息。

resizeTo()和resizeBy():调整浏览器窗口的大小。(分别接收新宽度高度和新窗口与原窗口的宽度和高度之差,同样可能被浏览器禁用)

8.1.5 导航和打开窗口

 

本文转载自博客园,原文链接:https://www.cnblogs.com/hermionepeng/p/13089086.html

全部评论: 0

    我有话说: