最基本的弹出窗口代码
0
其实代码非常简单: SskvxH+7 <SCRIPT LANGUAGE="javascript"> S0().2# <!-- |Qo`K%8 window.open ('page.html') nNJU@<|
{* --> o1<Y#db[ </SCRIPT> Z5iP1/&D 因为这是一段javascript代码,所以它们应该放在<SCRIPT LANGUAGE
t}L
kl( ="javascript">标签和</script>之间。<!--和-->是对一些版本低的浏览器起作用,在这些老浏览器中如果不支持javascript,不会将标签中的代码作为文本显示出来。 J'c]':U {3n|= Window.open AyHhq8Y ('page.html')用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。 R-8>, YaiogA 用单引号和双引号都可以,只是不要混用。 o
4G%m>$ 这一段代码可以加入HTML的任意位置,加入到<head>和</head>之间也可以,位置越靠前执行越早,尤其是页面代码较长时,又想使页面早点弹出就尽量往前放。 n
N.6?a ipzv]c& *IBT!@*Q& 【经过设置后的弹出窗口】 E D0\k $ 下面再说一说弹出窗口外观的设置。只要再往上面的代码中加一点东西就可以了。 g7\MFertR^ 我们来定制这个弹出窗口的外观、尺寸大小、弹出位置以适应该页面的具体情况。 }!_x
\eq^ <SCRIPT LANGUAGE="javascript:> 2J?ON|2M <!-- 581Jp'cje window.open ('page.html','newwindow','height=100,width=400,top=0,left=0, Pw c)u& toolbar=no,menubar=no,scrollbars=no,resizable=no, R1'tW= location=no,status=no') n^}M*# //写成一行 2;8I0BH*' --> Eo
h4#fZ\N </SCRIPT> cf\PG&S 参数解释: Cn
\5Vyrl <SCRIPT LANGUAGE="javascript"> js脚本开始; Evjvaa^ window.open 弹出新窗口的命令; ;Gf,I1d}{ page.html 弹出新窗口的文件名; %P3|#0yg0 newwindow 弹出窗口的名字(不是文件名),可用空 ″代替; JXT%@w>I height=100 窗口高度; f&=WgITa top=0 窗口距离屏幕上方的像素值; 5Q/&,NP
left=0 窗口距离屏幕左侧的像素值; kdq<)>" toolbar=no 是否显示工具栏,yes为显示; kU75 menubar,scrollbars 表示菜单栏和滚动栏; DfPC@`
k resizable=no 是否允许改变窗口大小,yes为允许; \zx &5a
# location=no 是否显示地址栏,yes为允许; i(Xz3L#( status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许; ]J '#KT{ </SCRIPT> js脚本结束。 SlaHhq3 >b1#dEY 【用函数控制弹出窗口】 Y^Y1re+} 下面是一个完整的代码。 On`T
pz/ <html> DN X-\ <head> gs:V4$(p4 <script LANGUAGE="javascript"> \jpm
<!-- zbL8
pp function openwin(){ c e\|
eN[ window.open("page.html","newwindow","height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no, o0)k5P~
<~ 3UNmUDl[~ location=no,status=no";) |y%M";MI //写成一行 \'Z^rjB } sQ
aP:@ --> L#~z# </script> 0_f6Qrcj </head> -L6V)aK& <body onload="openwin()"> U?e.)G ...任意的页面内容... YcdT/ </body> LSlY
Yyt </html> OaF[t*]D3 这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢? =C4!h'hz 方法一:<body onload="openwen()"> 浏览器读页面时弹出窗口; N6<G`k, 方法二:<body onunload="openwen()"> 浏览器离开页面时弹出窗口; ~ \3j{pr 方法三:用一个连接调用:<a href="#" onclick="openwin()">打开一个窗口</a> &Ndq^!e 注意:使用的"#"是虚连接。 zcCGREe= 方法四:用一个按钮调用:<input type="button" onclick="openwin()" value="打开窗口">
c W^ 7T/hmVi_ 【主窗口打开文件1.htm,同时弹出小窗口page.html】 ?5Q_G1H& 将如下代码加入主窗口<head>区: i7|sVz= <script language="javascript"> "jA?s9 <!-- 1 R,?kUa function openwin(){ 4)z*Vux window.open("page.html","","width=200,height=200" ;) ]`T*}$| } c?7Wjy //--> ;Vlt4,s) </script> $G D@e0 加入<body>区:<a href="1.htm" onclick="openwin()">open</a>即可。 vQsI^p S0jYk ( 【弹出的窗口之定时关闭控制】 lL6W:Fq@( 下面我们再对弹出窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则…),让它在10秒钟后自动关闭是不是更酷了? Mcm%G# ~pG,|\9 首先,将如下代码加入page.html文件的<head>区: u3])_oj= <script language="javascript"> +A%"_7L} function closeit() { -E,p[Sp setTimeout("self.close()",10000) //毫秒 CCp&+LRvR } ,; k`N`#' </script> AroYDR,3+ 然后,再用<body ]m@p? A$
onload="closeit()">这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。) v/z~ j cd:VFjT E-"b":@: 【在弹出窗口中加上一个关闭按钮】 S?e*<s9k <form> [&K"OQ^\2h <INPUT TYPE='BUTTON' value='关闭'> mt*/%>@7R </form> /Q\|u:oO, 呵呵,现在更加完美了! BX-fV| h[}e5A]} 【内包含的弹出窗口——一个页面两个窗口】 R(W}..U0R" 上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。 DhzmC 通过下面的例子,你可以在一个页面内完成上面的效果。 I.hy"y2& <html> r
l>e~i <head> |rwx;+ <SCRIPT LANGUAGE="javascript"> MVOWJaT(Aq function openwin() h}yfL@ { @JU
Xp
OpenWindow=window.open("","newwin","height=250,width=250,toolbar=no,scrollbars="+scroll+",menubar=no";); b3l
~wp6> O
2W2&vY
//写成一行 0q_?<v_1 OpenWindow.document.write("<TITLE>例子</TITLE>" ;) B(,j*,f OpenWindow.document.write("<BODY BGCOLOR=#FFFFFF>" ;) E?cf#;2h8m OpenWindow.document.write("<H1>Hello!</h1>" ;) {\ ]KYI0 OpenWindow.document.write("New window opened!" ;) xy+hrbD)j OpenWindow.document.write("</BODY >" ;) ]!v\whZ> OpenWindow.document.write("</HTML>" ;)
,)Z1&J? OpenWindow.document.close() aqKrf(R
v } 'W*ODAz6 </script> uL
|O< </head> oL
-udH <body> {"mb)zr <a href="#" onclick="openwin()">打开一个窗口</a> /kNSB; <input type="button" onclick="openwin()" value="打开窗口"> ]+d>;$O </body> 9@wmngvM*Y </html> k FCdGl 看看OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签都会出现错误。记住用OpenWindow.document.close()结束啊。 X.[8L^ldh <8BNqbX `qhZZ{s)1U 【终极应用——弹出窗口的Cookie控制】 !xE@r,'oN 回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(你沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?有解决的办法吗?Yes!Follow S=qx,<J
39 me。我们使用Cookie来控制一下就可以了。 ~'0W(~Q8 首先,将如下代码加入主页面HTML的<HEAD>区: k;Ask#rs <script> VvTi>2(. function openwin(){ H0
-v^H>^ window.open("page.html","","width=200,height=200" ;) S@cKo&^ } j.+}Z | function get_cookie(Name){ (W5JVk_o var search = Name+ "=" Y'76! Y var returnvalue =""; 3o`c`;H%p if (documents.cookie.length >0){ G(gZL%M6 offset = documents.cookie.indexOf(search) f47dB_{5f. if (offset!=-1){ CvRO' offset += search.length
NR98]X end = documents.cookie.indexOf (";",offset); :*MR$Jf if (end ==-1) '3fN2[( end = documents.cookie.length; :ka^ztXG returnvalue =unescape(documents.cookie.substring(offset,end)) mX[J15 } vrIWw?/z? } N
5.kDT return returnvalue; 2yV^'o) } \k5
sdHmI[ function loadpopup(){ GOD{?#c$ if (get_cookie('popped')==";){ c^stfFE& openwin() lYS*{i1^ ' documents.cookie="popped=yes" /Ow@CB }
&Qq| } b-Ru UfUn0 </script> WZ=$c]gG 然后,用<body onload="loadpopup()">(注意不是openwin ZFs
xsg^r 而是loadpop啊)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once! mJYD"WgY /7x1Z*Hg 写到这里,弹出窗口的制作和应用技巧基本上算是讲完了,希望对正在制作网页的朋友有所帮助我就非常欣慰了。
k; >Vh'=X 需要注意的是,JS脚本中的大小写最好前后保持一致。 @hy~H?XN $laUkD#vz 没有菜单、工具栏、地址栏的弹出窗口: g.\%jDM zbgGK7 <script language="javascript"> _fSBb< <!-- )S;3WnQ) var gt = unescape('%3e'); vM50H var popup = null; -hc8IS var over = "Launch Pop-up Navigator"; t7Mq>rFB popup = window.open('', 'popupnav', Pm,
.[5uc 'width=500,height=500,resizable=0,scrollbars=auto'); // |(AFU3~ width=500,height=500为窗口长和宽 4c[/%e:\- if (popup != null) { K$w;|UJc if (popup.opener == null) { %ZX9YuXQ popup.opener = self; } {&UA60~6 popup.location.href = '要打开的文件名'; [YZgQ
} 3+(lK
d // --> W6_ rSVm </script> '#h ORQB
|