如何创建弹出式浏览器窗口

---摘自《搜狐》

当前在网页设计领域提供弹出式浏览器窗口已经是个非常普遍流行的功能,窗口是由JavaScript的函数控制的,此函数集成在HTML网页中。有些网页制作人员非常希望了解是否能够在一段Shockwave电影中实现打开和关闭浏览器窗口的功能,我们给出的答案是可以,但由于窗口是浏览器的组成部分之一,而Flash本身无法控制新窗口的属性,因此如果想控制窗口的打开或关闭必须由Flash向浏览器系统发送一系列指令。

注:本文将涉及JavaScript的一些函数,虽然我们希望尽可能多地在本文中进行详细的介绍,但由于页面所限,我们无法对JavaScript做出非常全面的介绍,您可以从很多第三方介绍JavaScript知识的丛书以及网站获取相关知识。 

实现弹出式窗口有以下三种方法,具体差别就在于实现的难度和控制手段上,而且请注意每种方法并不一定全部适用于所有浏览器。 

1.  "Get  URL"(获取链接):该方法比较简单,但并不提供对弹出窗口的控制功能,不过此方法适用于所有浏览器。 

2.  带JavaScript函数的"Get  URL"指令:该方法也比较简单,兼容性也较好,能够兼容下列版本的Internet  Explorer浏览器(Windows版2.0,  3.0,  Macintosh版4.5) 

3.  使用FS指令:该方法比较复杂,而且并不支持所有的浏览器,其支持的浏览器如下:Netscape  2,  Windows  3.1,  Macintosh  68k  all,  Internet  Explorer  4.5  Macintosh版。 

一:使用"Get  URL"创建弹出式窗口

使用"Get  URL"指令来创建弹出式窗口的方法非常简单,而且不需要任何JavaScript脚本支持,但它不能对弹出窗口的位置和大小进行控制,而且你也无法选择弹出的窗口是否拥有工具条。具体操作如下:

1.  向某按钮或关键帧指派"Get  URL"指令。

2.  在"URL"空白栏中填入打开新窗口的URL链接。 

3.  将弹出窗口的模式设为"_blank",这是告诉浏览器应打开一个新窗口。 

二:使用带JavaScript函数的"Get  URL"指令创建弹出式窗口 

本方法使用"Get  URL"指令以及JavaScript函数来实现弹出窗口的功能。我们通过Flash系统直接向浏览器输入JavaScript参数来控制打开的新窗口,根据我们对JavaScript的了解,我们知道这种方法会比较简单地实现我们需要达到的目标,而且兼容性也较好,但需要注意的是这种方法不支持Windows版的Internet  Explorer  3.0浏览器和Macintosh版的Internet  Explorer  4.5浏览器。  我们需要将JavaScript函数添加至HTML网页中,此函数是从Flash文件中的某个按钮或关键帧中调取的。在本例中,我们是在某按钮内执行"Get  URL"指令,具体操作如下:

步骤一:创建Shockwave电影

1.  将"Get  URL"指令指派至某个按钮或关键帧 

2.  在"URL"空白栏中填入打开新窗口的URL链接,将下列信息正确地填入空白栏内  javascript:openNewWindow('http:
//www.macromedia.com/index.html
','thewin','height=400,
width=400,toolbar=no,scrollbars=yes') 

3.  选择"File"(文件)>"Publish  Settings"(发布设置) 

4.  选择"Formats"(格式)一栏,将"Flash"和"HTML"两选项选中 

5.  选择"HTML"一栏,从"Templates"的弹出菜单栏中选择"Flash  Only  (Default)" 

6.  选择"Publish"按钮。这将创建Flash电影的一个SWF文件以及可嵌入网页中的HTML代码,请将SWF文件以及HTML代码全部保存至与FLA文件相同的目录下。 

步骤二:向HTML网页添加JavaScript脚本

HTML网页必须添加JavaScript函数,以便接收"Get  URL"指令信息。JavaScript函数是包含在HTML网页中的一段脚本代码,可以接收并执行某项指令。修改HTML网页的具体方法如下:

1.  在Dreamweaver或其它HTML编辑器内打开HTML网页。也可以使用象Notepad或SimpleText这样的文本编辑器。

2.  复制下列代码 

<script  language="JavaScript">

function  openNewWindow(URLtoOpen,  windowName,  windowFeatures)  {  newWindow=window.open(URLtoOpen,  windowName,  windowFeatures);  }
</script>
请将上述代码完整地复制到HTML源代码的<head>和</head>置标符之间。此函数就可以接收到Flash发出的指令并创建新窗口。Flash指令会把关于打开窗口的一些参数发送至浏览器,这些参数信息包括窗口大小,是否包含工具条以及窗口的链接地址。 

3.  向HTML源代码的<EMBED>置标符内添加下列参数
"swLiveConnect=true"

此参数可以放在<EMBED>置标符内的任意位置,但最好放置在"width"和"height"参数之后。

注:此步骤非常关键,它可以允许Flash电影与JavaScript代码进行交互联系。

4.  在上面的参数下再添加下列代码:

"NAME=yourmovie"
请把"yourmovie"替换为实际的名称,该名称在<object>标签的ID参数中有显示。而"NAME"与你的SWF文件名一致,但请不要把swf文件的扩展名包括在内。

5.  保存所有对HTML文档的修改,并在浏览器内进行测试。

此JavaScript函数的具体功能是什么?

"Get  URL"指令会告诉JavaScript脚本调取"openNewWindow"函数,该指令会将涉及加载哪条URL、打开浏览器窗口的名称、高度、宽度、是否带有工具条和滚动条等信息发送至JavaScript脚本。具体代码的意义如下:

javascript:openNewWindow 
告诉JavaScript脚本调取"openNewWindow"函数 

'http://www.macromedia.com/index.html'
打开新窗口的链接 

'thewin'
新窗口的名称 

height=400
新窗口高度为400像素 

width=400
新窗口宽度为400像素 

toolbar=no
新窗口中不显示浏览器工具条,可选项为yes或no 

scrollbar=yes
新窗口中显示滚动条,可选项为yes或no

请特别注意这几个参数中的单引号,这些单引号可以将代码的三个部分与其相对应的函数自变数分隔开。

"openNewWindow"函数
(URLtoOpen,  windowName,  windowFeatures) 

URLtoOpen 
'http://www.macromedia.com/index.html'  windowName 
'thewin' 

windowFeatures  'thewin','height=400,width=400,toolbar=no,
scrollbar=yes'

其中"windowFeatures"的函数自变数应保留为空白,例如带有下列URL链接的"Get  URL"指令:

javascript:openNewWindow
('http://www.macromedia.com/index.html','thewin') 

请将"windowFeatures"这部分的函数自变数略去,这不会设置窗口的大小或其它属性的参数,打开的窗口将不包含工具条或滚动条,而打开窗口的大小则由原窗口的大小来随机决定。

JavaScript函数的基本形式是:

函数名称(函数自变数)

函数名称指的是Flash对函数的叫法,而函数自变数指的是函数可接受的参数。

<Script  language="JavaScript">

此句会告诉浏览器使用哪种脚本语言,随后浏览器将启动处理相应脚本的系统。

<!-- 

此句为注释句,该标志告诉浏览器不要在窗口中显示其中的内容。虽然此脚本具有注释功能,但访问者并不会看到它的内容。

Function  openNewWindow(URLtoOpen,  windowName,  windowFeatures)

此句将某函数命名为"openNewWindow",而该函数可接受三个自变数,它们是

URLtoOpen
windowName
windowFeatures 

newWindow=window.open(URLtoOpen,  windowName,windowFeatures)

此句将利用JavaScript的打开功能来创建一个名为"newWindow"的新窗口。而新窗口的具体属性在括号内进行解释:

URLtoOpen  打开新窗口的URL链接

windowName  新窗口的名称 

windowFeatures  新窗口的一些属性,有时会包含许多属性,而有时也可以没有任何属性。所有的窗口自然都会包括关于"height"(高度)和"width"(宽度)的数值,其它一些属性包括工具条、位置以及滚动条信息等。
//-->

此行为注释结束行,在此之后的信息将正常显示在网页中。

</script> 

此行为脚本结束行

三:使用FS指令来创建弹出式窗口

使用FS指令向JavaScript函数中发送命名,它可以让JavaScipt函数创建一个新窗口,并可控制新窗口的高度和宽度。请注意本方法不支持Macintosh版Internet  Explorer  4.5浏览器,因为虽然Flash图像可以正常显示,但当你点击Flash按钮后无法执行FS指令。

采用此方法创建弹出式窗口的步骤为:一:创建Shockwave电影  在Flash中添加FS指令,然后使用"Flash  with  FS  Command"模板来发布HTML及SWF文件。


1.  将FS指令指派给某个按钮或关键帧

2.  在"Command"域中加入"openWindow"参数 

3.  选择"File">  "Publish  Settings"

4.  选择"Format"(格式)标签,将"Flash"和"HTML"两选项选中 

5.  选择HTML标签,从模板弹出菜单栏中选择"Flash  with  FS  Command" 

6.  选择"Publish"按钮。这将创建Flash电影的一个SWF文件以及可嵌入网页中的HTML代码,请将SWF文件以及HTML代码全部保存至与FLA文件相同的目录下。 

步骤二:向HTML网页添加JavaScript脚本

HTML网页必须添加JavaScript函数,以便接收FS指令信息。具体操作如下:

1.  在Dreamweaver或其它HTML编辑器内打开HTML网页。也可以使用象Notepad或SimpleText这样的文本编辑器。

2.  在HTML源代码中找到下列这行

//  Place  your  code  here...

3.  将该行删除并添加下列JavaScript脚本信息:

{if(command=="openWindow"){openNewWindow()}}

function  openNewWindow() 

{setTimeout(window.open('http://www.macromedia.com/'
,'newwindow', 

'height=200,width=300,toolbar=no')),0} 

4.  按下面几步对函数自变数进行修改,确保将单引号包括在内。 

5.  将'http://www.macromedia.com/'改变为你需要打开新窗口的绝对或相对路径。 

6.  将'newwindow'替换为新窗口的一个具体名称。 

7.  将'height=200,width=300,toolbar=no'替换为你希望打开新窗口的一些具体属性。

JavaScript函数的功能是什么?

{if(command=="openWindow"){openNewWindow()}

此函数会读取从Flash发出的指令,如果指令为"openWindow",那么JavaScript就会启动"openNewWIndow()"函数。

Function  openNewWindow()

{setTimeout(window.open('http://www.macromedia.com/'
,'newwindow','height=200,width=300,toolbar=no')),0}

此函数被嵌入至JavaScript,以便防止某些浏览器无法打开窗口的不兼容性情况的发生。