|
盲人如何制作网页讲座六- 如何在网页中制作弹出窗口和播放音视频文件
一、在网页中制作弹出窗口
经常上网的朋友肯定会遇到这样的情况，当登陆某网站的首页时，立刻会弹出一个窗口，或者在点击某个连接或点击某按钮时也会弹出窗口，有时这个窗口几秒钟后会自动消失，有时需要手动将其关闭。通常这些窗口里面显示的内容都是网站的一些提示信息，如注意事项、版权信息、警告、欢迎光临等。
实际上制作这样的页面效果非常容易，只要在该页面的代码中加入几段命令即可实现。下面咱们就一起来深度探索其制作原理。
(一)弹出窗口基本代码
若希望在制作的网页中把事先已经做好的"abc.htm"，这一页面做为窗口弹出的话，只要把下面的代码复制到您的网页中的<head> 和 </head> 之间即可：
<SCRIPT LANGUAGE="javascript">
<!-- window.open('abc.htm', '窗口名称', 'width=260, height=200, top=0,left=0, toolbar=no,menubar=no, scrollbars=no, resizable=no,location=no, status=no') -->
</SCRIPT>
实例解析：
1、<SCRIPT LANGUAGE="javascript">： 因本弹出窗口的代码是一段 “javascript” 角本语言，这段代码是角本的开始标签；
2、window.open： 弹出新窗口的命令；
3、'abc.htm'： 弹出窗口的文件名；
4、'窗口名称'： 弹出窗口的名字（不是文件名），非必须，可用空''代替；
5、width=260 弹出窗口的宽度；
6、height=300： 弹出窗口的高度；
7、top=0： 窗口距离屏幕上方的象素值；
8、left=0： 窗口距离屏幕左侧的象素值；
9、toolbar=no： 是否显示工具栏，yes为显示；
10、menubar，scrollbars： 表示菜单栏和滚动栏。
11、resizable=no： 是否允许改变窗口大小，yes为允许；
12、location=no： 是否显示地址栏，yes为允许；
13、status=no： 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
14、</SCRIPT>： Javascript 脚本结束;
15、<!-- -->： 该标签的目的是避免浏览器把没有使用大于号和小于号的代码显示出来，这个主要是针对低版本的浏览器。
(二) 用函数控制弹出窗口
建立弹出窗口函数,使用起来更方便，调用函数可以在打开页面的时候弹出窗口，也可以在关闭该页面的时候弹出窗口，而且还可以利用链接或按钮进行调用。请看下面的实例：
<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function openwin()
{
window.open ('abc.htm', '窗口名称', 'width=260, height=300, toolbar=no, menubar=no,scrollbars=no, resizable=no, location=no, status=no')
}
-->
</script>
</head>
<body>
网页内容
</body>
</html>
上面的实例中定义了一个函数openwin(),函数的功能就是打开一个名为 “abc.htm”的窗口。在调用它之前是没有任何用途的，那么怎么调用呢？请看下面的实例讲解。
1、打开页面的时候自动弹出： 只要在<body>标签中加入相应的代码即可，代码是 <body onload="openwin()">；
2、关闭页面后弹出窗口： 代码是 <body onunload="openwin()">
3、用一个连接调用：代码是 <a href="#" onclick="openwin()">打开一个窗口</a>
4、用一个按钮调用： 代码是 <input type="button" onclick="openwin()" value="打开窗口">
5、 同时弹出两个窗口，该功能只要对源代码稍微改动一下即可。具体改动方法如下：
<script LANGUAGE="JavaScript">
<!--
function openwin()
{
window.open ('abc1.htm', '窗口名称1', 'width=260, height=300, toolbar=no, menubar=no,scrollbars=no, resizable=no, location=no, status=no')
window.open ('abc2.htm', '窗口名称2', 'width=260, height=300, toolbar=no, menubar=no,scrollbars=no, resizable=no, location=no, status=no')
}
-->
</script>
注意事项：为避免弹出的两个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖。最后用上面介绍过的四种方法调用即可。两个窗口的name(窗口名称1和窗口名称2)不要相同，或者干脆全部为空。
(三) 定时关闭和手动关闭打开的窗口
1、自动关闭窗口
首先，将如下代码加入 “abc.htm” 文件的<head>区：
<script language="JavaScript">
<!--
function closeit()
{
setTimeout("self.close()",10000)
}
-->
</script>
实例解析：
(1) 上例是在所弹出的窗口 “abc.htm” 文件中定义了一个关闭页面的函数，其中的 10000 这个数值是毫秒，每秒等于1000毫秒。那么本例将在10秒钟以后关闭窗口;
责任编辑：
读者评论：
发表评论：
相关文章：
|
