网页新建窗口制作全攻略-JavaScript教程网购世纪资讯频道

您的位置：成都3c购物 >> 资讯中心 >> 网页新建窗口制作全攻略-JavaScript教程

网页新建窗口制作全攻略-JavaScript教程

转载自：互联网作者：cd3c.com

您正在看的JavaScript教程是:网页新建窗口制作全攻略。

　　在浏览或制作网页过程中经常用到新建浏览窗口。而新建窗口也有很多种变换方式，只要我们合理使用，可以让自己制作的网页更酷，下面让我们来看一看。

自动弹出窗口

在浏览一些网站时，我们常见到在打开首页文件的同时，会自动弹出另外一个窗口网页，这个网页一般都是一些公告、广告类的内容，它是怎样做出来的呢？实际上这些都是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＞

在要调用处，将这个链接加入即可。

这种方法适用于网页中的下载栏目，特别是使用表格将一大批下载资料集中统一管理时，或在做下载程序的使用说明等。