Javascript高级编程学习笔记(27)—— BOM(1)window对象1
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的更多相关文章
- Javascript高级编程学习笔记(18)—— 引用类型(7)单体内置对象
什么是内置对象呢? js高级程序设计中给出的定义为:由ES规定不依赖于宿主环境的对象,这些对象在JS执行前就已经存在 前面我们介绍的引用类型都是内置对象 除了这些对象外ECMA还规定了两个单体内置对象 ...
- Javascript高级编程学习笔记(31)—— BOM(5)screen、history对象
screen对象 screen对象应该是BOM对象中最不常用的对象了 其主要用于提供客户端的显示能力信息 包括浏览器外部显示的信息,和像素的宽高等 这个对象的主要用于检测客户端能力,一般不会影响功能 ...
- Javascript高级编程学习笔记(30)—— BOM(4)navigator对象
window对象作为浏览器的全局对象.location对象保存了页面的url信息 那么navigator对象又有什么作用呢? navigator对象 该对象最早由 Netspace Navigator ...
- Javascript高级编程学习笔记(29)—— BOM(3)location对象
在JS中location是一个神奇的对象 它既是window对象的属性,也是document对象的属性 它的作用主要在于保存当前文档页面的信息,以及将 url 解析为独立的片段 location对象属 ...
- Javascript高级编程学习笔记(28)—— BOM(2)window对象2
今天讲一下window对象和浏览器导航,弹窗等有关的内容 导航和打开窗口 window.open() 用于导航到某个特定 url 该方法接收四个参数 1.url 2.窗口目标(当页面中有多个框架fra ...
- Javascript高级编程学习笔记(1)—— JS简介
此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...
- Javascript高级编程学习笔记(35)—— DOM(1)节点
DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...
- Javascript高级编程学习笔记(3)—— JS中的数据类型(1)
前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西 ...
- JavaScript高级编程学习笔记(第三章之一)
继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...
随机推荐
- jquery点击回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 堆&栈的理解(转)
(摘自:http://www.cnblogs.com/likwo/archive/2010/12/20/1911026.html) C++中堆和栈的理解 内存分配方面: 堆: 操作系统有一个记录空闲内 ...
- mysql 报错 Packets larger than max_allowed_packet are not allowed
登录 mysql, 执行命令 : show variables like '%max_allowed_packet%' 重新设置: set global max_allowed_packet = 1 ...
- OO第9-11作业总结
一. 规格化设计 规格化抽象,即将执行的细节抽象为用户所需求的行为(模块做什么). 主要作用在于提高工程设计中的可维护性,可读性,明确功能,使整个编程任务变得清晰有序以减少程序BUG. 说其发展历 ...
- tensorflow学习之(七)使用tensorboard 展示神经网络的graph/histogram/scalar
# 创建神经网络, 使用tensorboard 展示graph/histogram/scalar import tensorflow as tf import numpy as np import m ...
- 20175316 盛茂淞 Arrays和String单元测试
Arrays和String单元测试 具体描述: 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split Arr ...
- C++数论板题(弹药科技):Lengendre定理和欧拉函数
弹药科技 时间限制: 1 Sec 内存限制: 128 MB 题目描述 经过精灵族全力抵挡,精灵终于坚持到了联络系统的重建,于是精灵向人类求助, 大魔法师伊扎洛决定弓}用博士的最新科技来抗敌. 伊扎洛: ...
- 更新windows补丁时一直卡在搜索更新
在微软下载好安装补丁Windows8.1-KB2999226-x64后,双击时一直停留在“正在此计算机上搜索”界面. 解决方案: 1.将windows 自动更新设置为:“从不检查更新” . 2.关闭 ...
- \usepackage{ulem}带下划线的问题解决
其实正文应该是斜体字的,但是有可能默认模板会导致斜体变下划线的问题,解决方法如下: \usepackage{ulem} 在 \documentclass[format=acmsmall, review ...
- java模板设计模式
1.概述 模板设计模式定义:定义一个操作中的算法骨架,将步骤延迟到子类中. 模板设计模式是一种行为设计模式,一般是准备一个抽象类,将部分逻辑以具体方法或者具体的构造函数实现,然后声明一些抽象方法,这样 ...