本节讨论了文档对象模型、客户端Javascript下Window中的各项属性,包括计时器、Location对象、Histroy对象、窗口、浏览器等相关属性的讨论。
具体详细Window属性介绍可以参见:http://www.w3school.com.cn/htmldom/dom_obj_window.asp
7.1 浏览器环境
在客户端Javascript中,表示HTML文档的是Document对象,Window对象代表显示该文档的窗口。
Window对象是客户端编程中的全局对象。Javascript每一个实现都有一个全局对象,对象位于作用链的头部。这个全局对象的属性也就是全局变量。客户端Javascript的Window对象是全局对象,它定义了大量的属性和方法,使用户可以对浏览器的窗口进行操作。
它定义了引用其它重要对象的属性,如Document对象的document属性,Screen对象的screen属性。。。
它还有两个自我引用属性:window和self,可以使用这两个变量来引用Window自身。
一个详细的客户端对象层次和文档对象模型(DOM)图见图13-1
7.2 文档对象模型(DOM)简介
Window对象是客户端Javscript中的一个关键对象,其它所有的客户端对象都通过这个对象访问。
Window对象定义了一个document属性,该属性引用与这个窗口关联在一起的Document对象。
location属性引用与窗口关联在一起的Location对象。
如果Web浏览器是一个带帧的文档,则顶层的Window对象的frames[]数组包含了对代表帧的Window对象的引用。
(window.)frames[1].document -> 引用的是当前窗口第二个子帧的Document对象。
(window.)document.forms[0] -> 访问当前页面的第一个Form表单
parent.frames[0].document.forms[0].elements[3].options[2].text -> 当前文档第一个Form表单第四个输入域第三个选项的值。
7.3 计时器
Javascript提供了全局函数setTimeout() / clearTimeout() / setInterval() / clearInterval()来进行指定时间的函数调用。
setTimeout() : 安排一个函数在指定的毫秒过去后运行。
clearTimeout() : 取消setTimeout()指定函数的执行。
setInterval() : 安排一个函数在一个指定的毫秒间隔内重复的调用。
clearInterval() : 取消setInterval()函数的执行。
7.4 Location对象
窗口的location属性引用的就是Location对象,它代表窗口中当前显示的文档URL
● location.href属性
Location对象的href属性是一个字符串,表示的是URL的完整文本,因为Location对象的toString()方法返回的就是href属性的值,所以,也可以直接使用location表示location.href
● location.search属性
search属性包含的是URL中?之后的那部分URL,通常是某种类型的查询字符串。
以下代码通过getArgs来获得URL后?后各个节。
1function getArgs( ) { 2 var args = new Object( ); 3 var query = location.search.substring(); // Get query string 4 var pairs = query.split("&"); // Break at ampersand 5 for(var i = ; i < pairs.length; i++) { 6 var pos = pairs[i].indexOf('='); // Look for "name=value" 7 if (pos == -) continue; // If not found, skip 8 var argname = pairs[i].substring(,pos); // Extract the name 9 var value = pairs[i].substring(pos+); // Extract the value value = decodeURIComponent(value); // Decode it, if needed args[argname] = value; // Store as a property } return args; // Return the object}
● 载入新文档
可以给location属性赋值一个字符串,浏览器会把它解释为一个URL,并且试图用这个URL载入和显示文档。
if (!document.getElementById)
location = "staticpage.html";
★ 最后,要注意不要混淆Window对象的location属性和document中的location属性。前者是一个Location对象,后者只是一个只读字符串,并不具有Location对象的任何特性。document.location与document.href是同义的。★
7.5 History对象
Window对象的history属性是该窗口的History对象。另外注意的是:脚本不能像数组一样访问history属性中的元素
History对象支持三种属性:back() / forward() / go()
● back()和forward()属性 :在窗口中向前后移动,与用户点击浏览器的Back和Forward按钮的作用相同。
● go() :使用一个整型参数,在历史列表中向前(正参数)或向后(负参数)跳过多少页。
7.6 窗口、屏幕和浏览器信息
●获得窗口的大小/屏幕和浏览器信息的相关代码如下所示:
1// 浏览器在桌面上的窗口大小 2 var windowWidth = window.outerWidth; 3 var windowHeight = window.outerHeight; 4 5// This is the position of the browser window on the desktop 浏览器在桌面上的超始位置 6var windowX = window.screenX // for IE is : window.screenLeft 7var windowY = window.screenY // for IE is : window.screenTop 8 9// The size of the viewport in which the HTML document is displayed// This is the window size minus the menu bars, toolbars, scrollbars, etc.// 只读属性,声明了窗口的文档显示区的高度和宽度,以像素计。这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。var viewportWidth = window.innerWidth; // for IE is : document.documentElement.clientWidthvar viewportHeight = window.innerHeight; // for IE is : document.documentElement.clientHeight;// These values specify the horizontal and vertical scrollbar positions.// They are used to convert between document coordinates and window coordinates.// These values specify what part of the document appears in the// upper-left corner of the screen.// 设置或返回当前页面相对于窗口显示区左上角的 X 位置/Y 位置var horizontalScroll = window.pageXOffset; // for IE is : document.documentElement.scrollLeftvar verticalScroll = window.pageYOffset; // for IE is : document.documentElement.scrollTop
注:以上属性,对于在Window IE6中并没有定义,Windows定义的相关属性在后面注释中已经写出来了。
7.7 Screen对象
Screen提供了有关用户显示器的大小和可用颜色数量的信息。有以下属性:
width/height : 以像素为单位的显示器大小。
availWidth/availHeight: 实际可用的显示大小。
availLeft/availTop : 屏幕上第一个可用位置的坐标(不适合IE)
7.8 Navigator对象
Navigateor对象提供了Web浏览器的总体信息。经常通过它用来区分在哪个浏览器中运行。
● 它有以下五个属性:
appName : Web浏览器的简单名称
appVersion : Web浏览器的版本号
userAgent : 浏览器在它的USER-AGENT HTTP头部中发送的字符串。
appCodeName : 浏览器的代码名
platform : 运行浏览器的平台
→以下代码在一个对话框中显示了Navigator对象的每个属性:
var browser = "BROWSER INFORMATION:\n";for(var propname in navigator) { browser += propname + ": " + navigator[propname] + "\n"}
alert(browser);
→以下代码用来确定浏览器和厂商版本:
var browser = { version: parseInt(navigator.appVersion), isNetscape: navigator.appName.indexOf("Netscape") != -, isMicrosoft: navigator.appName.indexOf("Microsoft") != -};
7.9 打开窗口和关闭窗口
● 打开窗口
使用window.open方法可以打开一个新的浏览器窗口。大多数Web浏览器配备了某种弹出窗口阻止系统。
★ 一般的,只有当作为用户点击按钮或链接的响应的时候,调用open()方法才会成功。★
windows.open调用需要四个参数。返回值是代表新打开窗口的window对象。
参数1:新窗口中显示的文档URL ,如果参数为null或空字符串,新打开的窗口为空
参数2:新窗口的名字,可以作为<a>标记或<form>标记的taget属性的值。
参数3:特性列表,声明窗口大小及GUI装饰。如果省略,将使用默认大小,及具有一套标准的GUI特性。
参数4:只在参数2命名的是一个已经存在的窗口时才有用,它是一个布尔值,表示参数1的URL是应该替换掉窗口浏览历史的当前项(true),还是在窗口浏览历史中创建一个新的项(false),后者是默认设置。
打开窗口举例:
var w = window.open("smallwin.html", "smallwin", "width=400,height=350,status=yes,resizable=yes");
● 关闭窗口
方法close将关闭一个窗口。如果已经创建了一个Window对象w,可以使用以下代码关闭:
w.close();
运行在被打开窗口中的JS代码可以使用以下代码关闭(关闭自身窗口)
window.close();
7.10 键盘焦点和可见性
方法focus()和blur()提供了对窗口的高级控制。focus()会请求系统将键盘焦点赋于窗口,调用blur会放弃键盘焦点。
在使用window.open()方法打开新窗口时,浏览器会自动在顶部创建窗口。但是如果它第二个参数指定的窗口名已经存在,open()方法不会自动使那个窗口可见,因此,调用open()后调用focus()很常用。
var w = window.open("smallwin.html", "smallwin", "width=400,height=350,status=yes,resizable=yes");w.focus();
7.11 状态栏
可以设置window.status属性来设置状态栏的显示。但是,现有的浏览器关闭了状态栏的status属性功能。
也可以使用window.defaultstatus属性,当浏览器没有任何其它东西(例如超链接URL)来显示的时候,会指定状态栏显示的文本。