ECMAScript是JS的核心

但是对于在浏览器中运行的JS,BOM显然才是真正的核心

我们知道JS是由三个部分组成的 BOM、DOM、ECMAScript

之前的文章我们主要介绍的是ECMAScript

也就是JS的核心语法

但是JS作为一种脚本语言,其创建的初衷不就是为了控制浏览器中的页面的表现形势嘛

所以JS与浏览器的交互由什么控制呢?

当然就是我们的BOM了(浏览器对象模型)

BOM提供了一系列的对象用于访问浏览器的功能,由于各个厂商会按照各自的想法去拓展它

所以只有其中的一部分被标准化,并被纳入HTML5规范

下面我们就来聊聊标准化的这些内容

Window对象

Bom对象的核心是window,在浏览器环境中这个对象除了是JS访问浏览器功能的接口对象外

还是JS的Global对象,parseInt等全局方法在浏览器环境中也就属于window对象

由于window对象也是浏览器环境中的全局对象

所以全局变量和全局方法最终都会是 window 对象的属性和方法

不过要注意的地方在于,为window对象定义属性,和声明全局变量是有区别的

看以下代码

var a = 10;
window.b = 10;

虽然变量 a 可以通过window.a 进行访问

但是我们不能通过 delete 操作符来删除 window.a

却可以删除 window.b

这是因为虽然全局变量会作为 window对象的属性,但是这个属性有个特点

那就是这个属性的特性 [[Configurable]] 是false,所以我们不能通过delete来删除它

这也是浏览器环境中所有全局变量,储存在window对象上的特点

窗口关系及框架

如果你的浏览器中包含框架(另外的窗口),那么每个窗口都有自己的window对象

每个window对象都有frames属性,该属性的值为一个数组

window.frames 数组中我们可以访问所有的window对象

这些框架的索引从0开始,从左到右,从上到下增加

每个 window 都有一个name属性,也就是当前框架的名称

也可以在 frames 数组中通过window的name进行索引

为了避免层级关系的混淆,Bom还有 top、parent对象

top指向当前的框架最顶层,也就是浏览器窗口

而 parent 指向当前窗口的父级框架

有时候 top会等于parent

但在不包含框架的页面中 top 一定等于 parent

除此而外还有个 self 用于标识当前window,但是只是为了与top、parent对应,并没有什么特殊的功能

PS. 由于框架之间的window 对象是独立的,所以都拥有独立的构造函数,所以 a窗口的Array类型不等于b窗口的Array类型

窗口位置

除火狐而外的浏览器都通过 screenLeft、screenTop来提供当前窗口相对于屏幕的坐标

火狐使用 screenX、screenY来提供相应属性

跨浏览器兼容如下

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

moveTo(x,y) 将窗口移动到屏幕的指定位置

moveBy(x,y)窗口水平移动x,垂直移动y

要注意的是上述方法虽然可以移动浏览器窗口,但绝大多数情况下都会被浏览器禁用

窗口大小

由于获取浏览器窗口的大小,各个浏览器实现、行为各异

所以就不多说

主要说明一下获取可视区域的大小

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight; if(typeof pageWidth !=="number"){
if(document.compatMode ==="CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidht;
pageHeight = document.body.clinetHeight;
}
}

这里也有两个方法控制窗口大小

resizeTo()

resizeBy()

使用和上面的move类似to是移动到某个坐标,by是朝垂直和水平分别移动多少

当然,这两个方法也很有可能被浏览器禁用

今天就先介绍这么多,明天继续~~~

Javascript高级编程学习笔记(27)—— BOM(1)window对象1的更多相关文章

  1. Javascript高级编程学习笔记(18)—— 引用类型(7)单体内置对象

    什么是内置对象呢? js高级程序设计中给出的定义为:由ES规定不依赖于宿主环境的对象,这些对象在JS执行前就已经存在 前面我们介绍的引用类型都是内置对象 除了这些对象外ECMA还规定了两个单体内置对象 ...

  2. Javascript高级编程学习笔记(31)—— BOM(5)screen、history对象

    screen对象 screen对象应该是BOM对象中最不常用的对象了 其主要用于提供客户端的显示能力信息 包括浏览器外部显示的信息,和像素的宽高等 这个对象的主要用于检测客户端能力,一般不会影响功能 ...

  3. Javascript高级编程学习笔记(30)—— BOM(4)navigator对象

    window对象作为浏览器的全局对象.location对象保存了页面的url信息 那么navigator对象又有什么作用呢? navigator对象 该对象最早由 Netspace Navigator ...

  4. Javascript高级编程学习笔记(29)—— BOM(3)location对象

    在JS中location是一个神奇的对象 它既是window对象的属性,也是document对象的属性 它的作用主要在于保存当前文档页面的信息,以及将 url 解析为独立的片段 location对象属 ...

  5. Javascript高级编程学习笔记(28)—— BOM(2)window对象2

    今天讲一下window对象和浏览器导航,弹窗等有关的内容 导航和打开窗口 window.open() 用于导航到某个特定 url 该方法接收四个参数 1.url 2.窗口目标(当页面中有多个框架fra ...

  6. Javascript高级编程学习笔记(1)—— JS简介

    此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...

  7. Javascript高级编程学习笔记(35)—— DOM(1)节点

    DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...

  8. Javascript高级编程学习笔记(3)—— JS中的数据类型(1)

    前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西 ...

  9. JavaScript高级编程学习笔记(第三章之一)

    继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...

随机推荐

  1. jquery点击回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 堆&栈的理解(转)

    (摘自:http://www.cnblogs.com/likwo/archive/2010/12/20/1911026.html) C++中堆和栈的理解 内存分配方面: 堆: 操作系统有一个记录空闲内 ...

  3. mysql 报错 Packets larger than max_allowed_packet are not allowed

    登录 mysql, 执行命令 : show variables like '%max_allowed_packet%'  重新设置: set global max_allowed_packet = 1 ...

  4. OO第9-11作业总结

    一. 规格化设计   规格化抽象,即将执行的细节抽象为用户所需求的行为(模块做什么). 主要作用在于提高工程设计中的可维护性,可读性,明确功能,使整个编程任务变得清晰有序以减少程序BUG. 说其发展历 ...

  5. tensorflow学习之(七)使用tensorboard 展示神经网络的graph/histogram/scalar

    # 创建神经网络, 使用tensorboard 展示graph/histogram/scalar import tensorflow as tf import numpy as np import m ...

  6. 20175316 盛茂淞 Arrays和String单元测试

    Arrays和String单元测试 具体描述: 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split Arr ...

  7. C++数论板题(弹药科技):Lengendre定理和欧拉函数

    弹药科技 时间限制: 1 Sec 内存限制: 128 MB 题目描述 经过精灵族全力抵挡,精灵终于坚持到了联络系统的重建,于是精灵向人类求助, 大魔法师伊扎洛决定弓}用博士的最新科技来抗敌. 伊扎洛: ...

  8. 更新windows补丁时一直卡在搜索更新

    在微软下载好安装补丁Windows8.1-KB2999226-x64后,双击时一直停留在“正在此计算机上搜索”界面. 解决方案: 1.将windows 自动更新设置为:“从不检查更新”  . 2.关闭 ...

  9. \usepackage{ulem}带下划线的问题解决

    其实正文应该是斜体字的,但是有可能默认模板会导致斜体变下划线的问题,解决方法如下: \usepackage{ulem} 在 \documentclass[format=acmsmall, review ...

  10. java模板设计模式

    1.概述 模板设计模式定义:定义一个操作中的算法骨架,将步骤延迟到子类中. 模板设计模式是一种行为设计模式,一般是准备一个抽象类,将部分逻辑以具体方法或者具体的构造函数实现,然后声明一些抽象方法,这样 ...