JavaScript高级程序设计16.pdf
第8章 BOM
BOM的核心对象就是window,它表示浏览器的一个实例,在浏览器中window对象有双重角色,它既是JavaScript访问浏览器的一个接口,又是规定的Global对象,因此所有在全局作用域中声明变量、函数都会是window对象的属性和方法
定义全局变量与在window对象上直接定义属性的差别是全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以
尝试访问未声明的变量会抛出错误,但通过查询window对象,可以知道某个可能未声明的变量是否存在
如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中,可以通过数值索引(从0开始,从左到右,从上到下)或者框架名称来访问相应的window对象,每个window对象都有一个name对象,包含框架的名称
top对象始终指向最高(最外)层的框架,也就是浏览器窗口
parent对象始终指向当前框架的直接上层,在没有框架的情况下,parent等于top等于window
window.frames[0]
window.frames["topFrame"]
top.frames[0]
top.frames["topFrame"]
frames[0]
frames["topFrame"]
与框架有关的最有一个对象是self,它始终指向window,它们可以互换使用,引入它的目的只是为了与top parent对象有个对应
窗口位置
用来确定和修改窗口位置
IE、Safari、Opera和Chrome提供screenLeft和ScreenTop属性,表示窗口相对与屏幕左边和上边的位置
FireFox则是使用screenX和screenY
跨浏览器取得窗口位置
var leftPos=(typeof window.screenLeft=="number") ? window.screenLeft : window.screenX;
var topPos=(typeof window.screenTop=="number") ? window.screenTop : window.screenY;
由于各浏览器厂商对窗口位置的定义不同,在跨浏览器条件下无法取得窗口左边和上边的精确位置,可以使用moveTo()和moveBy()将窗口移动到一个新的位置
它们都接收2个参数moveTo()接收新位置的X和Y坐标值,moveBy()接收在水平和垂直方向上移动的像素数
注意:这两个方法可能会被浏览器禁用,另外它们不适用框架,只能对最外层的window对象使用
窗口大小
跨浏览器确定窗口大小不是一件简单的事情
IE9+、Firefox、Safari、Opera和Chrome为此提供了4个属性:innerWidth、innerHeight、outerWidth和outerHeight
IE9+、Safari和Firefox中outerWidth和outerHeight返回浏览器窗口本身的尺寸
Opera中outerWidth和outerHeight表示页面视图容器(单个标签页对应的浏览器窗口)的大小,而innerWidth和innerHeight表示页面视图区的大小(减去边框宽度)
在Chrome中innerWidth、innerHeight、outerWidth和outerHeight返回相同的值,即视口的大小而非浏览器窗口大小
在IE、Firefox、Safari、Opera和Chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面的视口信息,在IE6中,这些属性必须在标准模式下才有效,如果是混杂模式就必须通过document.body.clientWidth和document.body.clientHeight取得相同的信息,混杂模式下的Chrome对于以上两种方法都可以取得视口大小,虽然无法确定浏览器本身的大小,但却可以取得页面视口的大小
var pageWidth=window.innerWidth,
pageHeight=window.innerHeight;
if (typeof pageWidth !="number"){
if (document.compatMode == "CSS1Compat"){
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}
else{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}
resizeTo()和resizeBy()方法可以调整浏览器窗口的大小,都接收2个参数,它们与移动窗口位置的方法类似,也可能被浏览器禁用,在Opera和IE7+默认就是禁用的,并且同样不适用与框架,只对最外层window对象使用
JavaScript高级程序设计16.pdf的更多相关文章
- JavaScript高级程序设计58.pdf
15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...
- JavaScript高级程序设计2.pdf
第三章 基本概念 区分大小写 ECMAScript中的一切(变量.函数名和操作符)都区分大小写 标识符 指变量.函数.属性的名字或者函数的参数 第一个字符必须是一个字母.下划线或美元符号,其它字符可以 ...
- JavaScript高级程序设计61.pdf
JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...
- JavaScript高级程序设计60.pdf
错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...
- JavaScript高级程序设计57.pdf
表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...
- JavaScript高级程序设计55.pdf
输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...
- JavaScript高级程序设计54.pdf
过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...
- JavaScript高级程序设计53.pdf
共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...
- JavaScript高级程序设计52.pdf
表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...
随机推荐
- Linux中解决SSH连接慢问题
[转载]来源:http://www.bkjia.com/xtzh/893669.html [转载原因]:其他文章都是修改服务器端配置,但为了保证服务器端安全问题,一般情况下最好不要修改服务器端配置.因 ...
- NFC手机
NFC手机 NFC手机内置NFC芯片,比原先仅作为标签使用的RFID更增加了数据双向传送的功能,这个进步使得其更加适合用于电子货币支付:特别是RFID所不能实现的,相互认证和动态加密以及一次性钥匙(O ...
- SQL For Xml
最近遇到点棘手的问题,大致如下: 1.数据局格式: 企业名称 排口名称 监测时间 监测因子 a b c pH值 a b c 氨氮 a b c 化学需氧量(COD) 企业名称.排口名称 ...
- ios专题 -线程互斥与同步
[原创]http://www.cnblogs.com/luoguoqiang1985 今天遇见了这问题,决定要需要讨论下. 线程同步的方法: @synchronized 官方文档解释:The @syn ...
- SGU 299.Triangle
题意: 给出n(<=1000)条线段的长度ai(<=10^500),输出任意三条能组成三角形的边.没有输出3个0. Solution: 简单题.只是要处理高精度. java大法好. imp ...
- Maven项目的目录结构
刚接触Maven没多长时间,实习时在的小公司很不规范,所有web项目都是dynamic web project搭建,没有用到项目构建,管理工具,导致了非常多的重复工作与低效. 先来看看Maven的功能 ...
- windows下node.js+sublime中安装coffeescript
node.js中安装Coffeescript 1.我的node.js安装目录 2.node.js 全局模块所在目录 3.node.js安装coffeescript npm install -g c ...
- MAC 安装Ruby On Rails
MAC 安装Ruby On Rails 对于新入门的开发者,如何安装 Ruby, Ruby Gems 和 Rails 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发 ...
- 《C和指针》章节后编程练习解答参考——第5章
5.1 题目: 略 解答代码: #include <stdio.h> int main(void) { char ch; while (((ch = getchar()) != EOF) ...
- iOS 必备技术点
IOS面试问题总结 分类: IOS开发2013-11-20 17:26 5873人阅读 评论(1) 收藏 举报 目录(?)[+] 通过网络搜寻和自己总结经历找了一些IOS面试经常被问道的问题: ...