[理学]第06章 浏览器对象模型BOM.ppt

JavaScript语言与Ajax应用 第6章 浏览器对象模型（BOM） 目 录 t6.1 window对象 t6.2 location对象 t6.3 navigator对象 t6.4 screen对象 t6.5 时间间隔与暂停 6章 浏览器对象模型（BOM） 6.1 window对象 twindow对象表示浏览器中打开的窗口，提供 关于窗口状态的信息。可以用window对象访 问窗口中绘制的文档、窗口中发生的事件和 影响窗口的浏览器特性。 t在JavaScript 中，window 对象是全局对象 ，所有的表达式都在当前的环境中计算。也 就是说，要引用当前窗口根本不需要特殊的 语法，可以把该窗口的属性作为全局变量来 使用。例如，可以只写 document，而不必写 window.document。 6章 浏览器对象模型（BOM） 6.1 window对象 t如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建 一个 window 对象，并为每个框架创 建一个额外的 window 对象。每个框 架都由它自己的window对象表示，存 放在frames集合中。在frames集合中 ，可用数字（由0开始，逐行从左到右 ）或名字对框架进行索引。 6章 浏览器对象模型（BOM） 6.1 window对象 【例6-1】window框架。 6-1 在例6-1里创建了一个框架集，包括一个顶层框架和两个底层框架，使 用了frame.htm、anotherframe.htm、yetanotherframe.htm三个页 面。 6章 浏览器对象模型（BOM） 6.1 window对象 我们可以使用window.frames0或 window.frames“topFrame“引用 框架。当然，我们也可以用top对 象代替window对象引用这些框架， 例如top.frames0.top对象指向 的都是最顶层的框架，即浏览器窗 口自身。这可以确保指向正确的框 架。如果在框架内编写代码，其中 引用的window对象就只是指向该框 架的指针。 6章 浏览器对象模型（BOM） 6.1 window对象 1窗口操作 window对象对操作浏览器窗口（或框架）非常有用，这意味着，浏览 器窗口的大小是可以移动或调整的，可用下面四种方法来实现： moveBy(dx,dy)：把浏览器窗口相对当前位置水平移动dx个像素， 垂直移动dy个像素；Dx值为负数，向左移动窗口，dy值为负数，向 上移动窗口。 moveTo(x,y)：移动浏览器窗口，使它的左上角位于用户屏幕的 (x,y)处，可以使用负数，但是会把部分窗口移出屏幕的可视区域 。 resizeBy(dw,dh)：相对于浏览器窗口的当前大小，把窗口的宽度 调整dw个像素，高度调整dy个像素；Dw为负数，缩小窗口的宽度， dy为负数，缩小窗口的高度。 resizeTo(w,h)：把窗口的宽度调整为w，高度调整为h，不能使用 负数。 6章 浏览器对象模型（BOM） 6.1 window对象 1. 2导航和打开新窗口 t用JavaScript可以导航到指定的URL，并用 window. open()方法打开新窗口。该方法接 受四个参数，即要载入新窗口的页面的URL、 新窗口的名字、特性字符串和说明是否用新 载入的页面替换当前载入的页面的Boolean值 。一般只用前三个参数，因为最后一个参数 只有在调用window. open ()方法却不打开新 窗口时才有效。 t如果用已有框架的名字作为window.open()方 法的第二个参数调用它，那么URL所指的页面 就会被载入该框架。 6章 浏览器对象模型（BOM） 6.1 window对象 例如，要把页面载入名为“topFrame”的框架 ，可以使用下面的代码： window. open(“/“,“topFrame“) ; 这行代码的操作就像是点击一个链接，该链接 的href为“http:/./”， target为“topFrame”的框架。 如果声明的框架名无效，window.open()将打开 新的窗口，该窗口的特性由第三个参数（特 性字符串）决定。如果省略第三个参数，将 打开新的浏览器窗口，就像点击了target被 设置为“_blank”的链接。这样新浏览器窗 口的设置与默认浏览器窗口的设置就是完全 一样。 6章 浏览器对象模型（BOM） 6.1 window对象 window.open()方法将返回window对象作为它的函数值，它就是新创建 的窗口（如果给定的名字参数是已有的框架名，则为框架）。用这 个对象，可以操作新创建的窗口，代码如下： var oNewWin=window.open(“/“,“wrowindow“, “height=150,wid th=300,top=10,left=10,resizable=yes“); oNewWin.mveTo(100,100); oNewWin.resizeTo(200,200); 还可以使用该对象调用close()方法关闭新创建的窗口： oNewWin.close(); 如果新窗口中有代码，还可以在新窗口中用下面的代码关闭其自身： window.close(); 6章 浏览器对象模型（BOM） 6.1 window对象 【例6-3】打开新窗口。 6-3 function openwindow() open(“adv.htm“, “, “toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0,resizable=0, width=650, height=150“); 看看和我一起打开的广告窗口 6章 浏览器对象模型（BOM） 6.1 window对象 3对话框 t“对话框”是指那些为用户提供有用信息的弹出 窗口。除弹出新的浏览器窗口，还可使用其他方 法向用户弹出信息，即利用window对象的 alert()、confirm()和prompt()方法。 talert()方法：只接受一个参数，即要显示给用 户的文本。调用alert()方法后，浏览器将创建 一个具有确定按钮的系统消息框，显示指定的文 本。通常用于一些对用户的提示信息，例如在表 单中输入了错误的数据时，显示警告对话框。 6章 浏览器对象模型（BOM） 6.1 window对象 tconfirm()方法：只接受一个参数，即 要显示的文本，浏览器创建一个具有“ 确定”按钮和“取消”按钮的系统消息 框，显示指定的文本。该方法返回一个 布尔值，如果点击“确定”按钮，返回 true；点击“取消”按钮，返回false 。 6章 浏览器对象模型（BOM） 6.1 window对象 tprompt()方法：提示用户输入某些信息，接 受两个参数，即要显示给用户的文本和文本 框中的默认文本。如果点击“确定”按钮， 将文本框中的值作为函数值返回；如果点击 “取消”按钮，返回空值。下面我们看一个 典型的prompt()方法的使用： var sresult=prompt(“你的名字是什么?“,“); if (sResult != null) alert(“欢迎, “ + sResult); 6章 浏览器对象模型（BOM） 6.1 window对象 4状态栏 t每个浏览器窗口的底部都有一个状态栏，用 来向用户显示一些特定的消息。状态栏提示 何时正在载入页面，何时完成载入页面。可 以用window对象的两个属性设置它的值，即 status和defaultStatus属性。status可以暂 时改变状态栏的文本，而defaultStatus则可 在用户离开当前页面前一直改变该文本。 t例如，在第一次载入页面时，可使用默认的 状态栏消息，如下： twindow.defaultStatus= “You are surfing . “; 6章 浏览器对象模型（BOM） 6.1 window对象 5访问历史 t对于用户访问过的站点的列表，出于安 全原因，JavaScript不能得到浏览器历 史中包含的页面的URL，只能实现在历 史记录间导航。 而window对象中的 history对象及它的相关方法即可实现 在历史记录间导航的功能。 6章 浏览器对象模型（BOM） 6.1 window对象 tback() 方法：加载历史记录中的前一个 URL 。 tforward() 方法：加载历史记录中的下一个 URL。 tgo()方法：跳转到指定历史记录，接受一个 参数，即前进或后退的页面数。如果是负数 ，就在浏览器历史中后退；如果是正数，就 前进。 t后退一页，可用下面的代码： twindow.history.go(-1); 6章 浏览器对象模型（BOM） 6.1 window对象 【例6-5】加载历史列表中的前一个页面。 6-5 function goBack() window.history.go(-1); /等效于 window.history.back() 6章 浏览器对象模型（BOM） 6.2 location对象 tLocation 对象存储在 window 对象的 location 属性中，表示那个窗口中当 前显示的页面的 URL 地址。表6-3列出 了location的属性。 6章 浏览器对象模型（BOM） 6.2 location对象 thref 属性是一个可读可写的字符串，可设置或返 回当前显示的页面的完整 URL。因此，我们可以 通过为该属性设置新的 URL，使浏览器读取并显 示新的 URL 的内容。当一个 location 对象被转 换成字符串，href 属性的值被返回。这意味着可 以使用表达式 location 来替代 location.href 。改变该属性的值，就可导航到新页面： tlocation.href=“http:/ www:“; t采用这种方式导航，新地址将被加到浏览器的历 史栈中，放在前一个页面后，浏览器的后退按钮 会导航到调用了该属性的页面。 6章 浏览器对象模型（BOM） 6.2 location对象 location对象的方法。 assign() 方法：加载新的文档。 reload() 方法：重新加载当前文档。 replace() 方法：用新的文档替换当前文档 。 assign() 方法：可加载一个新的文档，也可 以实现与设置location. href属性同样的 操作，例如： location.assign(““); 6章 浏览器对象模型（BOM） 6.2 location对象 t如果不想让包含脚本的页面能从浏 览器历史中访问，可使用 replace()方法。该方法所作的操 作与assign0方法一样，但它多了 一步操作，即从浏览器历史中删除 包含脚本的页面，这样就不能通过 浏览器的后退和前进按钮访问它了 。 6章 浏览器对象模型（BOM） 6.2 location对象 例如： You wont be able to get back here Enjoy this page for a second, because you wont be coming back here. setTimeout(function() location.replace(“/“); ,1000) 6章 浏览器对象模型（BOM） 6.3 navigator对象 tnavigator对象是最早实现的BOM对象之 一，NetscapeNavigator 2.0和IE3.0引 入了它。它包含大量有关Web浏览器的 信息。可以用window.navigator引用它 ，也可以用navigator引用。 tnavigator对象是一种事实标准，用于 提供Web浏览器的信息。同样，缺乏标 准阻碍了navigator对象的发展，因为 不同浏览器在支持该对象的属性和方法 上有差异。6-4表列出了最常用的属性 。 6章 浏览器对象模型（BOM） 6.3 navigator对象 tnavigator 对象包含的属性描述了正在 使用的浏览器。可以使用这些属性进行 平台专用的配置。navigator对象有五 个主要属性用于提供正在运行的浏览器 的版本信息：appName、appVersion、 userAgent、appCodeName和platform。 6章 浏览器对象模型（BOM） 6.3 navigator对象 【例6-6】有关访问者的浏览器的全部细节。 6-6 var x = navigator; document.write(“CodeName=“ + x.appCodeName); document.write(“); document.write(“MinorVersion=“ + x.appMinorVersion); document.write(“); document.write(“Name=“ + x.appName); document.write(“); document.write(“Version=“ + x.appVersion); document.write(“); document.write(“CookieEnabled=“ + x.cookieEnabled); document.write(“); document.write(“CPUClass=“ + x.cpuClass); document.write(“); document.write(“OnLine=“ + x.onLine); document.write(“); document.write(“Platform=“ + x.platform); document.write(“); document.write(“UA=“ + x.userAgent); document.write(“); document.write(“BrowserLanguage=“ + x.browserLanguage); document.write(“); document.write(“SystemLanguage=“ + x.systemLanguage); document.write(“); document.write(“UserLanguage=“ + x.userLanguage); 6章 浏览器对象模型（BOM） 6.4 screen对象 虽然出于安全原因，有关用户系 统的大多数信息都被隐藏了， 但JavaScript中还是可以用 screen对象获取某些关于用户 屏幕的信息。该对象提供显示 器的分辨率和可用颜色数信息 。该对象的属性如表6-5所示。 6章 浏览器对象模型（BOM） 6.4 screen对象 t确定新窗口的大小时，availHeight和 availWidth属性非常有用。例如，可以 使用下面的代码让新开窗口填充用户的 屏幕： twindow.moveTo(0,0) twindow.resizeTo(screen.availWidth, screen.availHeight); 6章 浏览器对象模型（BOM） 6.4 screen对象 【例6-7】使用screen对象获得屏幕属性。 6-7 document.write(“屏幕宽度是：“ + window.screen.width + “); document.write(“屏幕高度是：“ + window.screen.height + “); document.write(“屏幕色深是：“ + window.screen.colorDepth + “); document.write(“屏幕可用宽度是：“ + window.screen.availWidth + “); /可用高度是除去任务栏以后的高度 document.write(“屏幕可用高度是：“ + window.screen.availHeight + “); 6章 浏览器对象模型（BOM） 6.5 时间间隔与暂停 tJavaScript支持暂停和时间间隔。所谓 暂停，是在指定的毫秒数后执行指定的 代码。时间间隔是反复执行指定的代码 ，每次执行之间等待指定的毫秒数。 twindow对象的setTimeout() 方法用于 在指定的毫秒数后调用函数或计算表达 式。该方法接受两个参数，要执行的代 码和在执行它之前要等待的毫秒数（ 1/1000秒）。 6章 浏览器对象模型（BOM） 6.5 时间间隔与暂停 例如，下面的代码做出的操作都是在1秒钟后显示一条警告 ： setTimeout(“alert(Hello word! ) “,1000); setTimeoutfunction()alert(“Hello world! “);,1000; 调用setTimeout()时，它创建一个数字暂停ID。暂停ID本 质上是要延迟的进程的ID，在调用setTimeout()后，就 不应该再执行它的代码。要取消还未执行的暂停，可调 用clearTimeout()方法，并将暂停ID传递给它： var iTimeoutId=setTimeout(“alert(hello world! ) “,1000); clearTimeout(iTimeoutId); 6章 浏览器对象模型（BOM） 6.5 时间间隔与暂停 时