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,布布扣,bubuko.com

时间: 2024-08-09 06:35:21

JavaScript高级程序设计16.pdf的相关文章

JavaScript高级程序设计58.pdf

15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域的页面间传递消息(比如www.wrox.com域中页面与p2p.wrox.com) XDM的核心是postMessage()方法,目的是向另一个地方传递信息,“另一个地方”指的是包含在当前页面中的<iframe>元素或者当前页面弹出的窗口 postMessage()方法接收2个参数:一条消息和一个

JavaScript高级程序设计51.pdf

(续上篇) 模拟鼠标事件 var btn=document.getElementById("myBtn"); //创建事件对象 var event=document.createEvent("MouseEvents"); //初始化事件对象 event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null); /

JavaScript高级程序设计48.pdf

设备中的键盘事件 任天堂Wii等设备可以通过键码知道用户按下了哪个键 复合事件 复合事件是DOM3级事件新添加的一类事件,用于处理IME的输入序列.IME(Input Method Editor,输入法编辑器)可以让用户输入在物理键盘上找不到的字符,IME通常需要同时按住多个键,但最终只输入一个字符,有3种复合事件 compositionstart:在IME的文本复合系统打开时触发,表示要开始输入了 compositionupdate:向输入字段插入新字符时触发 compositionend:在

JavaScript高级程序设计35.pdf

遍历 "DOM2级遍历和范围"模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker,两个类型能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作,与DOM兼容的浏览器都可以访问到这些类型的对象,IE不支持DOM遍历 使用以下代码检测浏览器对DOM2级的遍历支持情况: var supportsTraversals=document.implementation.hasFeature("Traversal&q

JavaScript高级程序设计31.pdf

其它方面的变化 DOM的其他部分在"DOM2级核心"中也发生了一些变化,这些变化与XML命名空间无关,而是确保API的可靠性及完整性 DocumentType类型的变化 DocumentType类型新增了3个属性:publicId.systemId和internalSubset 其中前两个属性表示的是文档类型声明中的两个信息段,这两个信息段在DOM1级中没有办法访问到 alert(document.doctype.publicId); //文档类型声明PUBLIC后的字符串 alert

JavaScript高级程序设计29.pdf

insertAdjacentHTML方法 插入标记最后一个新增的方式是insertAdjacentHTML()方法,它接收两个参数:插入位置和要插入的HTML文本,第一个参数必须是下列值之一: "beforebegin",在当前元素之前插入一个相邻的同辈元素: "afterbegin",在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素: "beforeend",在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子

JavaScript高级程序设计24.pdf

Element类型 Element类型用于表现XML或HTML元素,提供对元素标签名.子节点及特性的访问,它具有以下特征 nodeType的值为1: nodeName的值为元素的标签名: nodeValue的值为null: parentNode可能是Document或Element: 要访问元素的标签名可以使用nodeName属性或者tagName属性,两者返回相同的值 <div id="myDiv"></div> var div=document.getEle

JavaScript高级程序设计38.pdf

比较DOM范围 在有多个范围的情况下,可以使用compareBoundaryPoints()方法来确认这些范围是否有公共的边界,接收两个参数:表示比较方式的常量值和要比较的范围 常量如下 Range.START_TO_START(0):比较第一个范围和第二个范围的起点:Range.START_TO_END(1):比较第一个范围的起点和第二个范围的终点:Range.END_TO_END(2):比较第一个范围和第二个范围的终点:Range.END_TO_START(3):比较第一个范围的终点和第二个

JavaScript高级程序设计39.pdf

第13章 事件 JavaScript与HTML之间的交互式通过事件来实现的. 事件流 事件流描述的是从页面中接收事件的顺序,IE和Netscape提出了完全相反的事件流概念,IE是事件冒泡流,Netscape是事件捕获流 事件冒泡 click一个<div>元素,click事件沿DOM树向上传播,在每一级节点都会发生,直至传播到document对象,现代浏览器则将事件冒泡到window对象 事件捕获 click一个<div>元素,click事件沿DOM树依次向下,直到传播到事件的实际