JavaScript程序设计教程 第6章 窗口和框架.pdf

第6幸窗口和植架6.1W i ndow对象概述6.2的口框架简介6.3的口框架控制囱6.4 FRA M E之间的链接6.5浮动窗口6.6实战 6.7小结6.1 W i ndow对象概述6.1.1什衣是为勿以对象o在JavaScript中，一个浏览器窗口就是一个Window对象。Window对象主要用来控制由窗口弹出的对话框、打开窗口或关 闭窗口、控制窗口的大小和位置等。一句话，Window对象就是 用来操作“浏览器窗口”的一个对象。6.1.2勿勿以对家属嘏和方德Window对象是全局对象，它的属性可作为全局变量来使用，它的方法可当作函数来使用，也就是说，引用Window对象的 属性和方法时，可以省略对象名。表6.1列出了Window对象的所有属性，表6.2列出了Window 对象的所有方法。表6.1 Window对象属性属性描述closed返回窗口是否已被关闭defaultstatus设置或返回窗口状态栏中的默认文本document对document对象的只读弓|用history对h istory对象的只读引用innerheight返回窗口的文档显示区的高度innerwidth返回窗口的文档品示区的宽度length设置或返回窗口中的框架数量location用于窗口或框架的location对象name设置或返回窗口的名称navigator对navigator对象的只读引用outheight返回窗口的外部高度outwidth返回窗口的外部宽度pageXOffset设置或返回当前页面相对于窗口显示区左上角的X位置pageYOffset设置或返回当前页面相对于窗口显示区左上角的Y位置parent返回父窗口Screen对Screen对象的只读引用self返回对当前窗口的引用，等价于Window属性status设置窗口状态栏的文本top返回最顶层的窗口windowwindow属性等价于self属性，它包含了对窗口自身的引用screenLeftscreenTop screenXscreenY只读整数。声明了窗口左上角在屏幕上的X和Y坐标。IE、Safari和Opera支持 screenLeft 和screenTop,而Firefox和Safari支中寺screenX和screenY表6.2 Window对象方法方法描述alert()显示一段带有消息和一个确认按钮的警告框blur()把键盘焦点从顶层窗口移开clearlnterval()取消由 setlntervalO 设置的 timeoutclearTimeoutO取消由setTimeout。设置的timeoutclose()关闭浏览器窗口confirm()显示带有一段消息以及确认按钮和取消按钮的对话框createPopupO创建一个pop-up窗口focus()把键盘焦点给予一个窗口moveByO可相对窗口的当前坐标把它移动到指定的像素mOVeToO把窗口的左上角移动到一个指定的坐标open()打开一个新的浏览器窗口或直找一个已命名的窗口print()打印当前窗口内容promptQ显示可提示用户输入的对话框resizeByO按照指定的像素调整窗口的大小resizeTo()把窗口的大小调整到指定的宽度和高度ScrollBy()按照指定的像素值来滚动内容scrollTo()把内容滚动到指定的坐标setlntervalO按照指定的周期（以毫秒计）来调用函数或计算表达式setTimeout()在指定的毫秒数后调用函数或计算表达式运用表6.1和表6.2的Window属性和方法来看一下具体 应用。1.简单对话框JavaScript提供了 3种Window方法来实现对话框分别为 alert()confirm。和prompt()。alert()为警告对话框，是一个带感叹图标的小窗口，显示文本信息并且使扬声器发 出“”的声音。通常用来输出一些简单的文本信息。confirm。是询问对话框，询问对话框是具有双向交互的信 息框，系统在对话框上放置按钮，根据用户的选择返回不同 的值。设计程序时可以根据不同的值予以不同的响应，实现 互动的效果。通常放在网页中，对用户进行询问并根据其选 择而选择不同的流程。prompt。是输入对话框，很多情况下 需要向网页中的程序输入数据，简单的鼠标交互显然不能满 足。此时就可以使用Window对象提供的输入对话框prompt(),通过该对话框可以输入数据。下面通过脚本6-1的示例来 介绍这3种对话框的效果。vtitleWindow对象的三种对话框v/titlevar yourname=prompt（您的姓名是：”J小王Wconfirm（“您确定吗?）=true）alert（youmame+”先生，您好！”）脚本o 运行脚本6-1,依次单击确定按钮显示如图6.1、图6.2和图6.3所示。Q此网页显示:想的姓名是：禁止此页再显示对话框.确定 取消此网页显示：您确定吗？禁止此天再显示对话框。确定 取消xQ图6.1 prompt。方法生成的对话框图62 confirm。方法生成的对话框此网页显示：小王先生，您好!装Itlit页再显示对话框。确定图6.3 alert。方法生成的对话框o 2.状态栏状态栏由Window对象的status属性和defaultstatus属性控 制。浏览器的状态栏通常位于窗口的底部，用于显示一些任务 状态信息等。默认情况下，状态栏里的信息都是空的，只有在 加载网页或将鼠标放在超链接上时，状态栏中才会显示与任务 目标相关的瞬间信息。Window对象的defaultstatus属性可以用 来设置在状态栏中的默认文本，当不显示瞬间信息时，状态栏 9 可以显示这个默认文本。下面实现一个在状态栏显示当前时间 1的功能，示例代码如脚本6-2所示。QvMtleWindow对象状态栏信息v/讥lefunction setStatus()var d=new Date();status=d.getHours()+:+d.getMinutes()+:+d.getSecon ds();return true;)input type=button onmouseover=return setStatus。”value=请观察状态栏”,Q脚本62.htmlo 3.定时设定和时间间隔Window对象的setTimeout()方法可以延迟代码的执行时 A 间，也可以用来指定代码的执行时间，而clearTimeout()方 法则用于取消代码的执行。o setTimeout()常用于执行一个动画或其他重复的动作。1如果运行了一个函数，使用方法setTimeout()进行调度，使 自己再次被调用，这样就得到了一个无须用户干涉就可以反 oF复执行的进程。、JavaScript 还提供了 setinterval()和 clearlnterval()方法，它们的功能与setTimeout()和clearTimeout()相似，只不过它们会自动地重新调度要反复运行的代码，无须代码?自己进行再调度。oQOQ4.nav i gat or 对象navigator对象是Window对象的属性，通常用于获取浏 览器和操作系统的信息。navigator没有统一的标准，各个浏览器都有自己不同 的navigator版本，表6.3列出的是navigator对象常用属性OoO表6.3 navigator对象常用属性属性描述appCodeName返回浏览器的代码名appMinorVersion返回浏览器的次级版本appName返回浏览器的名称appVersion返回浏览器的平台和版本信息browserLanguage返回当前浏览器语言cOOkieEnabled返回指明浏览器中是否启用cookie的布尔值cpuClass返回浏览器系统的CPU等级onLine返回指明系统是否处于脱机模式的布尔值platform返回运行浏览器的操作系统平台systemLanguage返回操作系统使用的默认语言userAgent返回由客户机发送服务器的user-agent头部的 值userLanquaqe返回操作系统的自然语言设置OQo 5.Screen对象Window对象的screen属性引用Screen对象。Screen对象提 供有关用户显示器的大小和可用的颜色数量的信息。属性width 和height指定以像素为单位的显示器大小。属性availHeight和availWidth指定的是实际可用的显示器 大小，它们排除了像Windows任务栏这样的特性所占有的空间。可以使用这些属性来确定要载入文档的图像大小，或者在创建多 6个浏览器窗口的应用程序中确定要创建的窗口的大小。Screen对 象还有一个属性colorD epth指定用户浏览器表示的颜色位数。此?属性并不常用。OO6.L ocation对象窗口的L ocation属性引用的是L ocation对象，它代表该窗二 口中当前显示的文档的URL。L ocation对象的href属性是一个字 符串，包含完整的URL文本。这个对象的其他属性(如protocol?、host、search等)则分别声明了URL的各部分。下面代码可提 i取URL中的各参数。o document,write(“hash:+location.hash+“br+“host:+location.host+”+“hostname:+location.hostname+”+o href:/z+location.href+“br+“pathname:+location.pathname+“br+“port:/z+location.port+”+“protocol:+location.protocol+“br+q“search:+location.search)；oQlocation,href是最常用的属性，用于获取或设置窗口的OOOURL,改变该属空，就可以跳转到萼的页面，如下代码所示。script type=text/javascript”)location,href=http:/;运行这段代码打开页面将会跳转到人邮教育社区的页面oQOQon L ocation对象的assign()方法也可实现上述操作。如果不想让包含脚本的页面能从浏览器的历史记录中访问，replace()方法可以做到这一点。replace()方法所做的操作与assign()方 法一样，但它多了一步操作，即从浏览器的历史记录中删除包含 脚本的页面，这样就不能通过浏览器的后退按钮和前进按钮来访 问它了，assign。方法却可以通过后退按钮来访问上个页面。QOolocation对象还有个reload()方法，可以重新载入当前页面 o reload。方法有两种模式，即从浏览器的缓存中重载，或从Q服务器端重载。究竟采用哪种模式由该方法的参数决定。false：从缓存中重新载入页面。true：从服务器重新载入页面。无参数:从缓存中载入页面，如果参数省略，默认值为falseOOOQ7.Hi story 对象 Hi story对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。由于安全方面的考虑，开发人员无法得到用户?浏览器的URL,但借由用户访问过的页面列表，可以在不知道 实际URL的情况下实现后退和前进。history,length属性保存着历史记录的URL数量。初始时o,该值为1。如果当前窗口先后访问了3个网址，1 history,length属性等于3。history对象还提供了一系列方法，允许在浏览历史之间移动，包括go()、back。和forward。o g0()方法可以在用户的历史记录中任意跳转。这个方法接 收一个参数，表示向后或向前跳转的页面数的一个整数值。负 数表示向后跳转(类似于后退按钮)，正数表示向前跳转(类 似于前进按钮)。go()方法无参数时，相当于history,go(0),可以刷新当前页面。6.1.3窗口相关舞作JavaScript提供了许多Window方法与属性，可以使用它们 来控制窗口。L窗口位置获取浏览器（Firefox不支持）提供了screenL eft和screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。在窗OOO口最大化的情况下，运行脚本6-7时，各个浏览器返回的值并不相同。chrome返回left回；top:0。而IE则返回left回;top:56（若有菜单栏，则返回left:0;top:78）,这是因为IE中保存的是 从屏幕左边和上边到由Window对象表示的页面可见区域的距离o Fir efox则由于自身的bug,返回 left:-8;top:-8。O vtitle 窗口位置获取 v/titlevar timer=setlnterval(function()myDiv.innerHTML=left:+window.screenLeft+;top:+window.screenTop;)myDiv.onclick=function()clearlnterval(timer);Q脚本67.htmlo图6.7图6.9分别显示在窗口最大化的情况下，Chrome IE和Firefox浏览器的显示结果：left:0;top:0left:44:top:91图6.7 Chrome浏览器窗口位置图6.8 IE浏览器窗口位置left:undefined;top:undefined图6.9 Firefox浏览器窗口位置2.窗口位置移动使用moveTo()和moveBy()方法可以将窗口精确移动到一 个新位置，这两个方法只有IE浏览器支持。moveBy()方法可相对窗口的当前坐标把它移动到指定的 像素；而moveTo()方法是把窗口的左上角移动到一个指定的 坐标。moveTo()接收两个参数，分别是新位置的x和y坐标值;moveBy()接收两个参数，分别是水平和垂直方向上移动的 像素数。3.窗口大小获取outerWidth和outerHeight属性用于表示浏览器窗口本身 的尺寸；innerWidth和innerHeight属性用于表示页面大小,实际上等于浏览器窗口尺寸大小减去浏览器自身边框及菜 单栏、地址栏、状态栏等的宽度，见脚本6-8.html。vMtle窗口大小获取v/titledocument.body.innerHTML=outerWidth+window.outerWidth+;outerHeight:+window.outerHeight+,+innerWidth:+window.innerWidth+;innerHeight:+window.innerHeight;脚本68.html在Chrome下面运行结果如图6.10所示。outerWidth:1920;outerHeight:1040 innerWidth:1920;innerHeight:972图6.10窗口大小获取4.窗口大小调整使用resizeTo()和resizeBy()这两个方法可以用来调整浏 览器窗口的大小。resizeBy()方法是按照指定的像素调整窗口 的大小；resizeTo()方法则把窗口的大小调整到指定的宽度和 高度。resizeTo()接收两个参数：浏览器窗口的新宽度和新高 度；resizeBy()接收两个参数：浏览器新窗口与原窗口的宽度 和高度之差。O5.打开窗口window.open。方法可以导航到一个特定的URL,也可以打 开一个新的加览器窗口。这个方法接收4个参数：window,open(paraml,param2,param3,param4)o paraml：表示萋加载的URL。param2：窗口目标。表示已有窗口或者框架的名称，或者 是_self、_parent _top _blank等窗 口打开方式。1 param3：是一个逗号分隔的浚置字符串，表示在新窗口中都显示哪些特性。o param4：第4个参数只在第2个参数命名的是一个存在的窗 口时才有用。它是一个布尔值，声明了由第1个参数指定的 URL是应用替换掉窗口浏览历史的当前条目(true),还是 应该在窗口浏览历史中创建一个新的条目(false),后者?是默认的设置。oQwindow,open()方法的第3个参数可用特性如表64 所示。表6.4 open()方法在新窗口中特性OOQ设置值说明fullscreenyes 或 no表示浏览器窗口是否最大化，仅限IEheight数值表示新窗口高度，不能小于100left数值表示新窗口的左坐标，不能是负值locationyes 或no表示是否在浏览器窗口显示地址栏，不同浏览器默认值不 同，如果设置为no,地址栏可能会隐藏也可能会被禁用menubaryes 或 no表示是否在浏览器窗口中显示菜单栏，默认值为n。resizableyes 或 no表示是否可以通过拖动浏览器窗口的边框改变其大小，默 认值为n。Scrollbarsyes 或 no表示如果内容在窗口中显示不下，是否允许滚动，默认值 为nostatusyes 或 no表示是否在浏览器窗口中显示状态栏，默认值为n。toolbaryes 或 no表示是否在浏览器窗口中显示工具栏，默认值为n。top数值表示新窗口的上坐标，不能是负值width数值表示新窗口的宽度，不能小于100o 6.关闭窗口?就像方法open()打开一个新窗口一样，方法close()将关!闭一个窗口。如果已经创建了 Window对象w,可以使用如下的 代码将它关掉。OoQ6.2的口框架简介盲6.2.1什么是窗。福架O窗口框架可用于将窗口画面分割成多个小窗口，且每个小窗OOQO口中，可以显示不同的网页，达到在浏览器中同时浏览多个不同 网页的效果。当将浏览器的画面分割成多个窗口后，各个窗口将可以具有 不同的功能。有时候，希望把网页做成一个窗口显示的是目录，另一个窗口显示的是所选取的项目内容。这样，目录不变，项目 之间的切换就会快得多了。使用窗口框架不仅可以实现在一个屏 幕中打开多个窗口，而且可以在每个窗口上显示不同的网页内容oOoooooooQ6.22窗口福森的基率修构框架Frameset结构的基本格式如下。.(frameset)标签用于定义一个窗口框架。frame)标签则用于定义窗口框架中的子窗口。窗口框架文档的书写格式与一般的HTM L文档的书写格 式相同，只是用代替标签，是一个成对标签，有开始和结束标签，在frameset标签 内使用了另一个标签frame，用它来指定每一个窗口的内 容。ovheadvtitle 窗口框架文档 v/titlev/head你的浏览器不支持带框架的网页o脚本610.htmlo运行脚本6-10显示结果如图6.12所示。r 口XC O file:/G:/ziliao/JavaScriptgtSti7电子tm/第六曹2.源代码/脚本6-10.html Table of Contents Preface Chapter 1 Chapter 2 Chapter 3前言JavaScript是因特网上最流行的脚本语言.图6J2窗口框架示例结果O6.2.3窗。糖架的台制方式窗口框架的分割方式可分为两种，一种是水平分割（rows属性），另一种是垂直分割（cols属性）。口框架控制16.s.i 糖架殁置标签的框架设置使用标签frameset）。frameset是成对标签，首标签frameset和尾标签/frameset之间的内容是HTM L文档,主体部分。使用框架的HTM L文档中不能出现北（1丫标签，否则会导致?Web浏览器忽略所有的框架定义而只显示？0（1丫和/1）0（1丫之间的 1内容。标签主要有rows、cols border bordercolor 和frameborder 5个属性。1.水平/垂直分割水平/垂直分割表示格式如下所示Oo 其中rows表示窗口行分隔情况，cols表示列分隔。各参数值之间用逗号分隔，依次表示各个子窗口的高度（宽度）O rows和cols可以用数字、百分比或剩余值以及这3种方式 的混合来表示。数字：表示子窗口高度（宽度）所占的像素点数。百分比：表示子窗口高度（宽度）占整个浏览器窗 6 口高度（宽度）的百分比。剩余值“*”：表示当前所有窗口设定之后的剩余部分。?当符号*只出现一次，即其他子窗口的大小都有明确定义时，A表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号*出现一次以上时，表示按比例分割浏览器窗口的剩余?空间。这里表示将浏览器窗口分割为3列：第1个子窗口在第1列，窗口宽度为整个浏览器窗口宽度的 40%；L 第2个子窗口在第2列，占浏览器窗口剩余空间的2/3,即其宽度为整个浏览器窗口宽度的40%；第3个子窗口占剩余空间的1/3,宽度为整个浏览器窗口宽A度的20%。9 这段代码将创建3行框架。其中的每行都贯穿整个文档窗口!o第一个和最后一个框架被设为150像素高，第2行设置成300像素 iWj。Oorows和cols这两个属性也可以同时使用，表示窗口水平 和垂直同时分割。脚本6-11是水平与垂直同时分割示例。Simple FRAMESETv/FRAMES 捌本 611.htmlo运行脚本显示结果如图6.13所示。Q图6.13水平与垂直同时分割示例结果2.设置窗口框架宽度在frameset）标签中，可运用border属性控制分割窗口 的框架的宽度，其语法如下所示。9 frameset border=数值”图6.14嵌套分割示例结果其中的数值代表此窗口框架的宽度，单位为像素3.设置边框颜色o 在frameset标签中，可运用bordercolor属性设置边框的颜色，其语法如下所示。ooo其中的#代表此边框的颜色，取值可为RGB代码。脚本6-14 将边框颜色设置为“990000”。ooQvTITLE边框颜色设置v/TITLE脚本614.htmlo运行显示结果如图6.16所示。图6.16窗口框架边框颜色设置Qor包设置框架隐藏f rameborder属性用于控制窗口框架四周是否显示框架。此属性可使用在frameset标签与frame标签中，使用在frameset标签内时，可控制窗口框架的所有子窗口。使用在 frame标签时，则仅能控制该标签所代表的子窗口，其语法 L为。?0代表不显示框线，1代表显示框线，其默认值为1。脚本,6-15将子窗口边框线设置为隐藏。Oo每个子窗口均由frame标签定义。frame是单个的标A 签，使用时，将它写在的开始和结束标签之间，它主要有6个属性：src name、marginwidth marginheight、scrolling和noresize。o 1.性.src属性是用于指定要导入到该子窗口的HTM L文件，其语9法如下所示。i 如果一个frame标签中没有src属性，则该窗口显示为 空。o2.name属性V name属性是用来指定窗口的名称，此属性是可选的。当完成定义子窗口的名称后，我们便可在超链接中，指定显示网页 的子窗口，其语法如下所示。o frame name=子窗口名称“:3.scrolling属性scrolling属性用于描述该窗口是否有滚动条，该属性是.可选的，其设置语法如下；0 各设置值所代表的意义依序为显示、不显示、自动设置，默认值是auto。Oo 4.noresize属性noresize属性是一个标志，没有取值。它说明浏览者是 否可以自行用鼠标调整窗口的大小。如果设定了noresize属 性，则窗口不能调整。如果默认，则可以自行调整窗口的大 小。5,设置边距属性marginwidth/marginheightmarginwidth属性：用来控制窗口内显示的内容与窗口左 右边缘的距离，该属性是取一个像素值，默认为1,该属性是?可选的。i marginaheight属性：用来控制窗口内显示的内容与上下边缘的距离，该属性是取一个像素值，默认为1,该属性是可 一 选的。6.4 FRA M E之间的链接对于框架网页中的超链接，可用target属性指定该链接 的内容在哪个窗口显示。在脚本6-10中，放置文件的功能是由下面的代码片段实 现的。在文件toc.html中，放置文件的功能是由下面的代码 片段实现的。PrefaceChapter 1Chapter 2Chapter 3oQ代码中加粗部分用target属性指定了目标窗口为“window2”,即目标窗口为右边的子窗口。当用户从左边窗口的目录中选择一个链接时，浏览器会将这个关联的文档载入并显示在右边这个“windows2”窗口中。当其他链接被选中时，右边这个窗口中的。内容也会发生变化，而左边这个窗口始终保持不变。i 用target属性指定的目标窗口名称，必须使用字母/数字字符,否则窗口名将被忽略。QOO有几个特定的窗口名例外，这几个窗口名有特殊含义，它 们是_blank、_self _parent和_top。1.target=_blank?当将target属性设置为_blank时，若单击超链接后，将打开一个新窗口来显示网页。2.target=o 当将target属性设置为_self时,则将在同一窗口中显示链1接的网页。3.target=_parent/当将target属性设置为_parent时，若单击超链接后，该链接网页将导入目前子窗口的上一层框架。若没有上层，则导入 在同一窗口中。4.、target=top?.当将targe褊性设置为_top时，则将脱离目前的窗口框架,在最上层的窗口框架中，显示链接的网页。o 6 5浮动Y 在一个页面中直接引入另一个页面，这种技术称为浮动的窗口(Floating frame),也叫“内部框架”，在HTM L中 通过iframe标签实现，其语法如下所示。src：文件的路径，既可是HTM L文件，也可以是文本、A SP?，以及GIF、JP EG、JP G、P N G等图片文件。width height：“画中画”区域的宽与高。Oo,scrolling：当SRC指定的HTM L文件在指定的区域显示不完时，滚动选项，如果设置为N O,则不出现滚动条；如为A uto,上 则自动出现滚动条；如为Y es,则显示。frameBorder：区域边框的宽度，为了让“画中画”与邻近:的内容相融合，常设置为0。)name：子窗口名称。marg inheight、marginwidth：指定文字与边界的距离。Oo 6 6实战【案例6-11 iframe创建动态内容1.案例描述编写程序使用JavaScript为iframe创建动态内容，当用户 单击页面链接时，显示当前session中用户访问页面的次数。2.实现思路(1)首先创建一个HTM L主页面。页面包含一个子窗口 iframeo在主页面区域单击链接动态改变ifarme子窗口内容。(2)定义函数initL inks循环遍历页面上所有的链接。然后对?每个链接设置两个元素：onclick处理函数和thisP age属性。后 1者存有单机链接后会显示的页码，例如链接0就是page r,链接1就是“page2”，以此类推。循环中的onclick处理函数让 每个链接在箪击后调用writeContent()函数。oQi(3)定义数组pageCount用来记录加载页面的次数，每单击OOOOQ次页面，设置pageCount this.thisP age+,这样就可以跟踪到 访问特定页面的次数。(4)函数writeContent设置变量newText用来存储iframe的动 态内容，利用contentWindow属性找到i frame的元素，将newText 值存入进去。3.实现代码运行结果如图6.26所示。oMain Content AreaLink 1Link 2Link 3-C O localhost/脚本6-18.html：xYou are now looking at Example 1.You have been to this page 5 times.o图6.26创建动态的iframe示例结果o o 0 o o 6.7小结?本章介绍了 Window对象的属性和方法以及窗口创建的相关 属性和操作。Window对象位于浏览器对象模型中的顶层，是其 他所有对象的父对象。在应用中，只要浏览器一打开，无论是否存在页面，都将创建Window对象。i 框架是Web浏览器窗口中独立的、可以滚动的分块区域，每个框架都可以被看成是独立的窗口，包含自己的Window对象?O窗口框架的操作在实际编码中运用很频繁，可以运用窗口框1架实现复杂多变的页面。下一章将来学习JavaScript的 document 对象。O