JavaScript系列之(4)编写可重用的窗口

ZDNet软件频道 时间:2004-05-09 作者:Builder.com |  我要评论()
本文关键词:javatips
在这个技巧里面,我想把焦点放在一种可重复使用的窗口。
本文译自Builder.com,未经许可请勿转载

我是为了一个仍在开发中的电子商务网站(eMirage)编写这个程序的。与其强迫用户等待所有的产品图片下载完毕,我选择将图片显示在一个弹出窗口中。两个图片用同一个窗口显示,而且没有独立的 HTML 文件。下面是具体方法:

var faux = null;
varpic = new Image();

function copyCat(pic) {
  faux = window.open('','newWin','dependent,resizable,top=20,left=20,width=273,height=230');
  varfd = faux.document;
  fd.open();
  fd.write('<html><head><title>midnight @ the oasis</title></head>');
  fd.write('<body bgcolor="black" onLoad="window.focus()">');
  fd.write('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">');
  fd.write('<tr><td align="center" valign="middle"><imgsrc="' + 'graphics/' + pic + '.jpg"></td></tr>');
  fd.write('</table></body></html>');
  fd.close();
}

函数copyCat() 会打开新窗口并且将内容写入新打开的窗口。变量pic开始被声明为一个 image 对象,它会被放入 HTML 代码中,然后被作为一个参数传给copyCat()。这样能够让函数调用指定图片的名字。例如,这个技巧的第一个例子使用了下面的方式来调用copyCat() 函数:

<a href="javascript:copyCat('sg005')"></a>

将内容写入窗口对象里面有时候会让人感到很气馁。比方说,请注意在copyCat() 函数里面,变量pic的子目录路径必须作为一个独立的字符串,否则程序便无法正常运作:

fd.write('<tr><td align="center" valign="middle">
<imgsrc="' + 'graphics/' + pic + '.jpg"></td></tr>');

实现这个技巧不仅让网站设计者重复使用同一个窗口函数(copyCat()),还可以避免产生一大堆 HTML 档案,简化网站管理。


本文作者:Brent Lee Metcalfe 是一位 Web 架构顾问。


责任编辑:李宁

欢迎评论投稿

百度大联盟认证黄金会员Copyright© 1997- CNET Networks 版权所有。 ZDNet 是CNET Networks公司注册服务商标。
中华人民共和国电信与信息服务业务经营许可证编号:京ICP证010391号 京ICP备09041801号-159
京公网安备:1101082134