Open方法和close方法 主讲人:傅伟玉
使用open( )方法 打开一个新窗口 Open()方法使用方法 最简单的使用方法 variant = window.open( URL [, name [, features]] ) 最简单的使用方法 Window.open(“outwindow.htm”) 使用open( )方法 在本章,我们主要介绍window对象是最常用的那部分:方法。首先看看open ( )方法。 使用window对象的open ( )方法可以打开一个新的浏览器窗口并在其中显示一文档。实际上在前面章节的例子中,我们已经用到了window.open ( )方法。例如在上一章的例子document.htm中,在进入主页面,点击“开新窗口”按钮后,就创建了一个新Web窗口。它就是使用window对象的open ( )方法创建的。当然它也仅仅使用了open ( )方法的最简单形式。上图为open ( )方法的使用格式。 此方法返回一个window对象的变量,其代表新的窗口,如果有URL,则是想要打开的文档的URL,name是该窗口的名字,feature是一个字符串,其中可有一到多个选项,如确定窗口类型、定义工具按钮、菜单、是否显示状态栏、窗口尺寸是否固定等等。最简单形式即仅仅将想在新浏览器窗口中打开的那个文档的URL作为参数传给open ( ) 。
使用open方法的简单例子 打开主页时弹出的子窗口 主窗口 使用open方法的简单例子 我们在打开某些网站的主页时,常常会连带打开一个小窗口,而小窗口没有通常窗口有的菜单,工具条,以及web地址输入框,并且大小固定,而其内部则会有一些提示语言,或某些热门链接,那么它们是怎么实现的呢?来看下面的例子:打开一个窗口时,自动弹出一个小窗口。下面是这个例子的整个源代码:open.htm <HTML> <TITLE>New window example</TITLE> <BODY onload="OpenWindow( )"> <FORM> <CENTER> <BR> <H1>打开主窗口的同时开新窗口</H1> </CENTER> </FORM> </BODY>
使用open方法的简单例子 <BODY> 中定义onload事件 <BODY onload="OpenWindow()"> 事件处理器 window.open("new.htm", null, "height=200,width=400, status=yes,toolbar=no, menubar=no,location=no") 使用open方法的简单例子(续) 在这个例子中,由于有<BODY onload=“Openwindow ( )”>的设置,所以打开主页面时便去执行函数Openwindow ( ) ,其内部包含关键语句window.open ( ) ,因而打开了新窗口(如前面图中所示),现在来解析window.open(“new.htm”,null,“height=200,width=400,status=yes, toolbar=no, menubar=no,location=no”)内部的参数: 第一项是要打开文档的URL,第二项是给打开新窗口起的名字(为了便于控制),后面跟的是其它选项,窗口高度为200,宽度为400,有状态栏,无工具条,无菜单,无URL地址输入框。
使用open( )方法和close( )方法的例子 定义事件 <a onmouseout=“myFloater.close()” onmouseover=“MakeAnotherWindow( )”>开启一个视窗(、</a> 事件处理器:函数MakeAnotherWindow( ) function MakeAnotherWindow( ){ myFloater=window.open(" new2.htm ","myWindow", "width=220,height=200”); } 使用open( )方法和close( )方法的例子 本例进一步强化了对open( )方法和close( )方法的使用。下面是这个例子的HTML源码 popwindow.htm: <html> <head> <title>popwindow</title> <body bgcolor="#FFFFCC" link="#999900" vlink="#CC9966" alink="#990066"> <p align="center"><br> <font color="red" size="+2"><b>利用Javascript写一个简单的说明视窗!!</b></font> </p> <div align="center"><center> <table bgColor="#dbffdb" border="0" cellPadding="10" width="450"> <tbody> <tr>
使用open( )方法和close( )方法的例子 弹出提示窗口 使用open( )方法和close( )方法的例子(续) 在本例的初始页面中,当鼠标移入图中的超级链接时,会弹出一个提示窗口,当鼠标离开超级链接,则新弹出的窗口会自动关闭,页面恢复初始页面的样子。这种操作往往希望给用户一些提示信息,但又不愿占据太多的主页面空间。 请注意本例中close( )方法的使用,它引用前面定义窗口时的返回值,确定了要关闭的窗口,如果用 window.close( )就会关闭当前窗口,而不是希望关闭的窗口。 初始页面