|
源代码网推荐
在浏览或制作网页过程中经常用到新建浏览窗口。而新建窗口也有很多种变换方式,只要我们合理使用,可以让自己制作的网页更酷,下面让我们来看一看。
自动弹出窗口 在浏览一些网站时,我们常见到在打开首页文件的同时,会自动弹出另外一个窗口网页,这个网页一般都是一些公告、广告类的内容,它是怎样做出来的呢?实际上这些都是JavaScript代码的功劳。 1.源代码介绍 笔者将介绍实现自动弹出窗口的两种方法,都是调用window.open()实现的,它们的显示效果相同。 方法一代码如下: <script language="JavaScript"> <!-- window.open("XXX.htm", "NewWindow","toolbar=no,location=no, directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no //--> </script> 其中XXX.htm是你要在新窗口中打开的网页文件名。 方法二代码如下: <script language="JavaScript"> <!-- var gt=unescape("%3e"); var popup=null; var over="Launch Pop-up Navigator"; popup=window.open("", "popupnav","width=400,height=250,left=10,top=340, toolbar=0,location=0,directories=0,status=0,resizable=0,scrollbars=0"); if(popup!=null){ if (popup.opener==null){ popup.opener=self; } popup.location.href="XXX.htm"; } //--> </script> 2.参数解释 1)弹出窗口的浏览器界面设置参数如下: toolbar=yes 显示工具条 location=yes 显示网址栏 directories=yes 导航条,即显示“链接”栏 status=no 不显示状态条 menubar=yes 显示选单栏 scrollbars=yes 显示滚动条 resizable=no 是否可以改变窗口大小 copyhistory=yes 显示历史按钮yes 备注: 1.它们的值可以是yes 或no,也可以是1和0(除0以外,其它的数都算1); 2.上述参数如果在程序代码中没有出现,缺省都是禁止显示。 2)弹出窗口尺寸设置: width=300:设置新开窗口的宽度; height=200:设置新开窗口的高度; left=10:设置新开窗口距屏幕左边距; top=140:设置新开窗口距屏幕顶边距。 你可以根据需要,任意调整新开窗口的初始位置。
手工打开窗口 可能读者会说,这么简单,不就是在一个网页中增加一个链接,在链接代码<a href=http://www.blue1000.com/article/"xxx.htm">中增加target="_blank"字段吗?其实,这种方法是最普通的新建浏览器窗口的方法。如果我们希望在某些时候能够定制这个新建窗口的外观,那该怎么办呢? 我们可使用以下JavaScript代码完成该项工作: <script language="JavaScript"> <!-- function p(s) { open("intro/"+s,"","height=450,width=370,top=10,left=10,resizable=1, scrollbars=1,status=yes,toolbar=no,location=no,menu=no","fullscreen,scrollbars"); }; //--> </script> 在要调用处,将这个链接加入即可。 这种方法适用于网页中的下载栏目,特别是使用表格将一大批下载资料集中统一管理时,或在做下载程序的使用说明等。 调用JavaScript程序 下面再让我们来看看怎样调用JavaScript程序。调用JavaScript程序有两种方法,即植入法和链接法,分述如下: 1.植入法 用记事本打开准备弹出窗口的网页,如:index.htm,在<head>和</head>标签中间直接插入上述代码; 2.链接法 (1)将上述程序剪贴到记事本中,然后保存为.js文件(实际上它是一个后缀名为.js的文本文件,本例假设为xx.js),注意在文档的开头和结尾不要有<script language="JavaScript">和</script>标签; (2)在<head>和</head>标签中间添加如下代码: “<script language="JavaScript" src=http://www.blue1000.com/article/"xx.js"></script>”。 注意事项 在弹出窗口后,如果隐藏了标题栏,那么窗口的关闭按钮也看不到了,怎样关闭这个窗口呢?我们可将以下代码加入到新建窗口的网页中: <a href="JavaScript:window.close()" title="点击此处将关闭该窗口">关闭此窗口</a> 只要点击,即可实现关闭该窗口的功能,当然,为了美观,你也可以用一幅图片来代替文字
源代码网供稿. |