小窗口大学问-玩透弹出窗口

蓝色工作室

正式落户草根

认证草根

Rank: 5 Rank: 5

管理员

帖子: 619
积分: 845
威望: 3776
金币: 0 元

楼主大中小发表于 2006-5-13 12:28 只看该作者 ( 看帖回帖是一种美德，您的回帖是对楼主最大的支持。)

小窗口大学问-玩透弹出窗口

经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易，只要往该页面的HTML里加入几段Javascript代码即可实现。+ @* V7 k9 |+ a3 ]# H6 \

　【1、最基本的弹出窗口代码】/ ~5 q3 c) s$ ^( A8 r
其实代码非常简单： " \, c. l$ }' D" \6 Y
<SCRIPT LANGUAGE="javascript">6 `3 ^% t  p  u6 V. W* Q
0 r8 D2 G0 v: c
</SCRIPT>

　因为这是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。+ j) H% p( U3 e9 H) p5 Q
　window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。
　用单引号和双引号都可以，只是不要混用。
　这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。
! N; V: J' ]; \! {% Z
　【2、经过设置后的弹出窗口】
　下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。/ i4 F3 L0 z8 {
/ T2 I4 k3 m: X5 h8 r1 Y
<SCRIPT LANGUAGE="javascript">

</SCRIPT>

　参数解释：. X( G4 z/ `# k& ~+ a. l. F

<SCRIPT LANGUAGE="javascript"> js脚本开始；0 [* j9 v9 T1 T2 U( L
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；9 A& W9 v& t+ {% G0 S
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；2 ~6 a" q" O) v" l" x
height=100 窗口高度；* D5 e- |; ^2 N/ S8 T: [
width=400 窗口宽度；. E3 v% F$ Q- V3 P/ X0 i5 _
top=0 窗口距离屏幕上方的象素值；: H, w  r6 I+ Q4 Z" i' T6 p- x! X( F2 k
left=0 窗口距离屏幕左侧的象素值；, {' v& R2 F, R" [/ ]
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。5 u2 X5 {9 c2 C" a" d
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；# r, ?6 m/ N; }6 t( |, @; t7 J
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT> js脚本结束
4 _7 e9 B- n2 c
　【3、用函数控制弹出窗口】
　下面是一个完整的代码。
<html>0 X5 w! _) u* C0 e
<head>+ ~( K* Y$ i9 e
<script LANGUAGE="JavaScript">

</script># K6 X# L# [+ B7 }
</head>
<body onload="openwin()">  d3 v; Z9 R4 Q. s6 v
...任意的页面内容...
</body>
</html>' @+ t  I* I* _$ Q

　这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢？4 }, T5 M, T: i( c9 r6 X
6 g3 G+ V6 f3 m3 E
　方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口；9 R/ `& q4 d# [3 A" h# A
　方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；; I8 R( g# g5 A: F' F5 ~5 B7 E" |
　方法三：用一个连接调用：
<a href="#" onclick="openwin()">打开一个窗口</a>" P- z! j5 `) n
注意：使用的“#”是虚连接。  t% f& |$ e* P, G; U
　方法四：用一个按钮调用：6 @0 a/ N! J% U" K* }. N
<input type="button" onclick="openwin()" value="打开窗口">
/ u8 Y5 L+ ~" r  L& I
　【4、同时弹出2个窗口】2 Y0 Q2 _6 d3 }
: \  l/ e8 u; q7 D2 n' P2 S6 Q
　对源代码稍微改动一下：) I' E  ]2 U; g! a+ Z
<script LANGUAGE="JavaScript">

</script>2 u) e7 T/ ?% J. k

　为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。OK？4 m' _( p( F% [$ g' {) J: v

　【5、主窗口打开文件1.htm，同时弹出小窗口page.html】" K6 y. v" w, Q- j* g
! B& p3 ~7 ~1 h6 V, Z, n  `9 N
　如下代码加入主窗口<head>区：+ c. C8 w1 ~3 [. q" K4 E
8 X- p; j0 P4 Z, W6 ~
<script language="javascript">, F+ Q- D3 W5 r" ^1 v- m' b
9 b! A  o" @% x4 @& T
</script>) Y  ?7 ^3 @0 d& i3 L* N
加入<body>区：
<a href="1.htm" onclick="openwin()">open</a>即可。/ D7 ]5 Y* s8 S1 W, ?6 V  o* F

　【6、弹出的窗口之定时关闭控制】

　下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则...)，让它10秒后自动关闭是不是更酷了？
; ~# B$ L3 j* E4 u( o* N2 Z" t
　首先，将如下代码加入page.html文件的<head>区：
<script language="JavaScript">0 @1 A2 T" H; e: A7 u

function closeit() {6 W2 }& h7 j! F7 }) m9 D

setTimeout("self.close()",10000) //毫秒
& l' J% L: ^  u; H3 X
}
3 s, ^7 V  q! l9 X: n5 R' x1 b  f
</script>/ x! r& R3 a& R
　然后，再用<body onload="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)/ W, }! P$ \- }! O* I5 n
( u9 j. D1 m1 ~* P
　【7、在弹出窗口中加上一个关闭按钮】
<FORM>
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>! ]  e( G- K9 l3 ?9 s, U
</FORM># c% S+ Q6 h! |
呵呵，现在更加完美了！( \6 A6 Q) N5 f7 }% r3 b" S: j( \

　【8、内包含的弹出窗口-一个页面两个窗口】

上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。) E* e, l. i) s* n, c" }
通过下面的例子，你可以在一个页面内完成上面的效果。

<html>
<head>- S  c; i/ C$ w3 Y3 p  g. x7 ~3 q
<SCRIPT LANGUAGE="JavaScript">* k5 d9 M: m& C4 c5 h: O
function openwin(). r  J; j7 w2 }6 d5 \5 q8 e- c3 S  f/ \3 a: `
{8 u4 o. ?9 m2 A
OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
//写成一行
OpenWindow.document.write("<TITLE>例子</TITLE>")9 Z5 [, Q8 H# f. Y+ n8 }! M5 v+ P
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")3 F; P' o& ]4 q7 B, ~9 F0 B& z
OpenWindow.document.write("New window opened!")! }6 w" S: H( V
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()5 X; s: N  }, g* B- n
}
</SCRIPT>
</head>( z) o, `) g- X+ Z
<body>
<a href="#" onclick="openwin()">打开一个窗口</a>
<input type="button" onclick="openwin()" value="打开窗口">" z* S( E6 h* q. W# r
</body>& f# @; C, s* W6 S- N' w$ L0 n/ }
</html>1 g0 U$ e% B, [) g' b
2 X% I, @# A  t0 R
　看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。, D' p1 Q$ b' w5 G! h0 {+ z

　【9、终极应用--弹出的窗口之Cookie控制】( X! _8 Z% b4 c, h" w: m4 B3 }
! L4 d9 `; m" I. b' f, p: ]0 C
　回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(3 E: u* I/ `, a9 ^8 A, N, \
　有解决的办法吗？Yes! ;-) Follow me.( c$ f. E: b" M/ f3 |. K; ^
　我们使用cookie来控制一下就可以了。  I' K! j( I% q8 g- @% _: g% Z& {& m
　首先，将如下代码加入主页面HTML的<HEAD>区：

<script>6 k: V* f% j' j2 G
function openwin(){. d3 Z, n2 c$ R) E  R/ ^& N
window.open("page.html","","width=200,height=200")+ U- p1 C+ {3 w3 t7 L/ M& w# j* V
}
function get_cookie(Name) {; }$ m) F) l6 o
var search = Name + "="2 O. C# W2 \. ~* P) T5 U2 V
var returnvalue = "";
if (document.cookie.length > 0) {+ d1 H% L  a/ l: C+ g
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);3 A3 A3 i# F$ x) \$ X+ z
if (end == -1)0 D( @9 N  N; ?" p3 u
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))8 c* r" ~4 t# T- M3 j) Y
}" @5 i/ ^3 n0 o+ q
}
return returnvalue;
}
! B* [, l- k# [4 t, e" T
function loadpopup(){, o8 S* [/ }# ]2 i) N' s
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}' O$ Q4 O  q; K$ I8 Z- Z
# m% ~" }% G! y( |  M( ~/ C
</script>
; j! C0 n- B, G$ w- I! T; ~' K
　然后，用<body onload="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！' x" A+ V) F/ k% `
9 t  N, U- u- F; u- x
- @' k1 x" f! n# z. U* `
http://gouwu.ik8.com

力争上游

TOP

‹‹ 上一主题 | 下一主题 ››

传奇世界私服\|传世私服	好魔域	天龙八部私服	最新城市通带.cs程序100一套	文字广告招商QQ：304888166
传奇私服	变态魔域	收录网站，返流量，谁链谁知道	techkoo--精英传播	最新魔域私服
魔域私服	魔域SF	装机系统一站通	完美世界私服