- UID
- 1
- 精华
- 积分
- 74558
- 胶币
- 个
- 胶分
- 点
- 技术指数
- 点
- 阅读权限
- 200
- 在线时间
- 小时
- 注册时间
- 2006-5-30
- 最后登录
- 1970-1-1
|
马上注册,结交更多胶友,享用更多功能!
您需要 登录 才可以下载或查看,没有账号?注册
x
经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段Javascript代码即可实现。下面俺就带您剖析它的奥秘。 ( N0 d/ f" p# ?8 X$ [# O
$ \' `$ T2 d4 E1 V+ Y 1、最基本的弹出窗口代码
@$ |( z- w& u5 P
& ^0 y1 q& ~' r/ U! |! S) w 其实代码非常简单:
! ]7 ~) ^- r4 S0 ^8 I/ Q" H5 P, e. d3 j$ q8 A; f6 @4 g
< SCRIPT LANGUAGE="javascript">
1 W2 k$ C9 k g! a8 H0 w6 }" y
" y+ j8 _5 V8 f < !--: S+ c% T4 i2 P' B( B% @4 X* U* V
5 ~3 a% _5 k$ a1 T
window.open ("page.html")8 ^+ ]6 {0 ~, G+ m7 v
% i" x+ D3 w2 h3 P5 F ^! e: K
-- + q8 D4 ?- U4 ]& @
>& D7 z: \! b7 T8 D
( F& R+ ? \8 s6 j0 x < /SCRIPT>
2 H# z% q* V; ~
3 e4 ^0 |' m- u 因为这是一段Javascript代码,所以它们应该放在< SCRIPT LANGUAGE="javascript">之间。 < !-- 和 -->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
- @+ J. E0 V6 w; Z1 h# |; r# {8 y. O
window.open ("page.html") 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。 A; Z( e A' C9 f4 i
- {( F n, M) H8 q( I% x2 ^ d7 t: q 用单引号和双引号都可以,只是不要混用。
4 X0 S* {* v1 `
3 S+ J$ e8 W" U% K' w G/ ?7 _7 h) l 这一段代码可以加入HTML的任意位置,< head>和< /head>之间可以,< body>间< /body>也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。 也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。
5 _7 o) n4 ~8 R# ?$ n& K! i S0 m( v( S e
2、经过设置后的弹出窗口
2 N; Q5 E% H8 _5 Y( I" G
n- @/ v. R' ~+ R: ]! K 下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。
1 L0 v7 T1 W# ]9 V% h7 f2 _! J9 \' g' d) e* @! s
< SCRIPT LANGUAGE="javascript">
* o8 B, w( H) E. h9 u7 e
. A" P3 ^% |" @+ T9 s# ] < !--; r+ ^- D) \$ m# E% T& T W$ y
G, [" e! H7 b1 R& s3 p. w
window.open ("page.html", "newwindow", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no")% M1 T( w/ p& ? P5 a2 o) z
( i( P# ^) U/ u( V2 O9 b, i
//写成一行/ q, O( }1 h e" A
9 ]* a3 c* w( A: Q1 G -->2 s/ _: w5 X. t% o1 E* B1 l0 \
/ x2 z; I) T S4 P! V) Z
< /SCRIPT> 2 A) J2 @3 R* ^: C5 u% S
F. d6 q% |& u, [& w
参数解释:
: s I# z3 b. Y& N( W. _& s2 t0 d+ [ E- o9 n& s& V" y+ V. C
< SCRIPT LANGUAGE="javascript"> js脚本开始;9 e2 Z2 g) _$ H9 [7 c1 h8 `4 \1 y
1 V3 j! j+ S2 l& ]6 ?; p# t3 Y window.open 弹出新窗口的命令;3 b* I2 l$ p1 A6 z' y8 C
5 |" z3 Y( t! P3 V+ C, c) W2 P
"page.html" 弹出窗口的文件名;
8 I! |; y4 }0 u9 A/ k3 W( h
1 i( U6 P. H( I2 j7 r, u "newwindow" 弹出窗口的名字(不是文件名),非必须,可用空"代替;
( q7 v7 v) O7 |2 Y/ T* S8 K' I$ @( L* s3 R( u
height=100 窗口高度;0 f* `- G/ ^8 S8 o0 [
6 @- f q6 }. K* D width=400 窗口宽度;' u: l& M2 H- |4 }; i
; y# M! I8 P6 i4 d5 J top=0 窗口距离屏幕上方的象素值;2 F' j4 M- n4 O
/ |: h) T H( t( J+ t7 b left=0 窗口距离屏幕左侧的象素值;
4 u& q+ p0 ^& b( Q) h5 _2 P; j
( v# t6 w" ?0 y toolbar=no 是否显示工具栏,yes为显示;4 g2 u0 _3 V' c
% z3 [9 y& A- u; ? C6 {! N menubar,scrollbars 表示菜单栏和滚动栏。9 Q( e+ L* Q n
% y6 X0 L @& `! d/ Z! [
resizable=no 是否允许改变窗口大小,yes为允许;
% s! L {1 T5 A1 c. `$ x9 z. {) {+ f: F, B9 m
location=no 是否显示地址栏,yes为允许;2 v2 b( y1 G* j( K/ o
$ {& ?/ B! x( [! c( D; D/ U! q
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;' v* d+ g4 d5 G& \5 m5 A0 r
f* W0 A4 S' b' ]) l < /SCRIPT> js脚本结束 + H+ |% k7 e. `) c
" p8 h4 x& }; @/ U) a( z
3、用函数控制弹出窗口
. w8 e. m* T5 X2 v7 [8 M; r. I2 m2 E
1 F/ m, l: p% @/ {9 G3 p 下面是一个完整的代码:
/ q; w% w2 T8 f6 Z y& _! g; u, U4 ?6 g
< html>
" {9 w2 ?+ Q4 w, w" W
- b b& j% q/ d < head>
9 u& z& k- h8 h! _) {- [% ]! c# y" F3 F# }; Q* t g* i
< script LANGUAGE="JavaScript">4 d/ O% ]0 o- ]# x
5 T6 u) F$ r4 }1 @
< !--
! Q- g! Z" p9 e( [3 @* B: a! p7 t6 @0 B: h6 i) J9 d1 r
function openwin() {
& l1 Z/ ^) y) r# P1 q# E7 U, G6 e
, c* K% w, {8 ^2 [0 a* S) W window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")/ I( I$ }' h G I# J/ N: z/ X: Q
4 Y* s. S0 i1 o! n4 g! f //写成一行
" F8 G- p3 q' n, C
8 L% M8 ~% u; O$ E$ \7 ^8 v9 H }
# t& G: T5 t4 p2 F/ H
+ c. i( e9 M2 y //-->1 Y7 _1 i; K( B$ M4 [. v( }# w6 l
8 `# g: e6 \& s' A% J# W < /script>( F/ t% Q; W+ l
3 F2 w7 R/ X4 |) E; @; L9 X8 o
< /head>
, ^7 w, m* _6 m7 \) S5 O3 I8 D; d: G3 l } E5 {7 y+ f. C5 ?
< body onload="openwin()">
' ^' W% _8 ?3 R- o' p6 i1 M& g- a! {& Z$ m
...任意的页面内容...
f( z. x* D4 {( D$ G5 J' z2 V* I3 S. ?+ x [
< /body>
& ]1 S# z& U- J# t% v
2 g4 E6 _' ~+ b% \7 t. Z$ }* F < /html>
" L- T& p7 ~1 s' E$ f3 r7 A2 P( K* E/ Z7 o
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。: [& v$ j2 P) }! z6 g0 K8 K
, z4 b8 F6 ^+ d. x; ? L
怎么调用呢?
" d, p: P( `1 I) d. C* c% M! Y5 V& I4 ], C; u
方法一:< body onload="openwin()"> 浏览器读页面时弹出窗口;* L+ |0 d* Y) F n1 R
: \! t$ A# _" b- c8 |( y
方法二:< body onunload="openwin()"> 浏览器离开页面时弹出窗口;+ m. |: ^$ n/ \0 n
* d0 ~3 h q) b9 @
方法三:用一个连接调用:< a href="#" onclick="openwin()">打开一个窗口< /a>+ K2 X0 q4 \4 M) N' R0 ^
0 a" F4 q1 ~9 y: Y
注意:使用的"#"是虚连接。9 G& a" ~* {! u/ C. X$ e+ {. D- O, e
6 G) y( E; z6 S- C' _8 \ 方法四:用一个按钮调用:< input type="button" onclick="openwin()" value="打开窗口">
/ n. p9 |! J+ u- M, `& \; i: u( P5 W
4、同时弹出2个窗口 , X* H+ i, G2 Y4 C
1 I& @3 N' ^5 S1 r# [ 对源代码稍微改动一下:& i" w6 Q! l9 H9 \' Q
; ]4 R9 V# V8 E! A) a: S0 v8 n < script LANGUAGE="JavaScript">
1 x- P( B' \! {) v3 O3 Y9 Y' r* b8 R# Q! {4 ?2 f4 K
< !--# F3 t& E. h" `8 q+ G' W
& x7 a; q" v0 M- m' t) B function openwin() {
+ i' ^* w3 z9 \/ R C* o2 ^' V: P7 s, n" d
window.open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")1 i0 v1 z* Z* Q! Z4 T: s
3 V5 H2 _& C% b: B! o: I9 X6 ]
//写成一行
+ K8 i' t7 K2 J9 d3 o1 t+ n
! C |, Z) X- t4 U, z0 O window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
4 _! O9 ^1 x; J% }% G, n5 B6 j; U5 `: V& k7 W- ?
//写成一行* @1 [) y. {! [
8 N0 h& a3 e% k2 A9 i& t' W- l* s
}
! K; j% n" k2 T5 _. y% r# V; {, C) {0 k# z: T+ D7 {
//-->
4 m, i7 O! f4 R5 L- Y" u$ ?- i, L4 e# {" W6 T
< /script>* q8 q- G- _0 k/ {) Y1 G/ E* D
# a& p2 G2 @: {- N
为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
: ^! e% O! f) G+ }3 v2 P% ~$ m: K: {6 _& P6 j/ g
注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。OK?
; o( o4 i3 ^6 ?' E, t
% L, a# P( S5 l& g 5、主窗口打开文件1.htm,同时弹出小窗口page.html0 ?5 |3 a# t# ?! @& X
+ P2 `9 O" O3 V" B 如下代码加入主窗口< head>区:
U r9 _% _) P& n$ H/ I, M5 {8 \9 ^
< script language="javascript">' ^8 k4 B4 A9 N+ [/ R
5 X9 M5 ^) d0 M8 D+ N
< !--; U: t/ @ `) W+ [! X1 d9 k
0 w: |. t$ F. V+ _2 _ function openwin() {
# }: i, b2 B: l9 t' m2 W. Y
0 I# E+ v) N# W7 F; l& w) Z+ m0 n* N% n window.open("page.html","","width=200,height=200")5 I5 c0 r& O: B. C! n( ^3 q
$ w* ]* ~: n( K) m: G
}
& B$ U* K, \; ~" Y3 _# Q- Y# `9 Q
//-->; `5 [3 A1 Y# E" j0 ~' R" D
' [: v; M/ p' n/ M. C1 N( S9 ? < /script>/ E4 h3 [5 H6 Q6 O+ g; J0 v1 Z2 g
( R" M/ Z- f5 G; R( p% X6 `
加入< body>区:
4 B( g. _& }! R2 c2 C2 w3 B# S9 P4 @; ]
< a href="1.htm" onclick="openwin()">open< /a>即可
4 T" b' i" ^% y* [& [7 R& W+ ^ R
6、弹出的窗口之定时关闭控制
. N6 h! e9 J7 C( b9 `! i
( y' d0 u% V, `' `: K4 p 下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则...),让它10秒后自动关闭是不是更酷了? ( t& [; v! v/ h! U2 P" v6 X$ t! A
4 T4 n, y) }1 t- }" e% v
首先,将如下代码加入page.html文件的< head>区:* ^: b' ]! v( ?
1 _8 B; K! Y+ _, ~( s < script language="JavaScript">9 M \ \5 c. P- O
0 f1 c. P# V0 Y! y. d2 m
function closeit() {
4 |5 y3 r4 b0 S& z2 a2 x+ f% w* C2 K' t, d
setTimeout("self.close()",10000) //毫秒
9 T+ W! t; @. _& ^; _" K
7 g8 I6 K7 F% Y% H2 c }/ \( R$ n% k3 P
1 J& ~9 }. j4 ^; f- V1 A: O2 D9 u0 n) k
< /script>
' N. `: w7 r) r/ [- S. @: D% @# V% U, V1 L+ g( s' D
然后,再用< body onload="closeit()"> 这一句话代替page.html中原有的< BODY>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)
4 d- ?. |# @7 N! ~7 ]2 z# h3 Z( W9 m/ ]) N9 t P s
7、在弹出窗口中加上一个关闭按钮
6 C# M: I$ T4 D7 u& e( A& k( v' M. p" h- j: L+ u+ I
< FORM>
9 ?9 i& T' Y* g3 T
" {/ p; Z8 W' T( O6 h) Q3 R5 Q4 O < INPUT TYPE="BUTTON" VALUE="关闭" onClick="window.close()">1 o% o) Y6 Q+ R, [4 i& Q: z
& Y3 e9 q/ q7 Q& y8 c J( N
< /FORM> " M% R, @! S. Q, @( h
7 c0 M. Y! N% }. e+ K& `$ H 呵呵,现在更加完美了! ) F% W M8 J+ I" Y5 @5 p; O
; `9 m0 G( ~' V, v) D 8、内包含的弹出窗口---一个页面两个窗口
) q( c( Z3 p, P; `
9 D& O; y/ H% e9 P' K7 q 上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。通过下面的例子,你可以在一个页面内完成上面的效果。
+ G3 ^( i& f8 o5 ~
$ W# U, o d2 y3 L8 w$ E < html>
) E: C* D1 \, I& x/ E8 r3 v8 e: f* R+ @, ?- O/ \
< head>. j. ]9 I; b( M) P
5 w( ^- F" Z) R4 j% L/ h- P I' u
< SCRIPT LANGUAGE="JavaScript">
# {1 j1 g, A* `" j. G1 D1 s6 P, t% M. i# y0 t0 B
function openwin()
5 f( h" _1 x1 j- d2 O# v: x' |* ~" u# V! h2 D" J9 R
{
$ Z. [4 q3 G3 I* c/ }9 F" ?* O. U
OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");* ~' O. B% n) J4 {2 W
( D. M& y5 `4 n* c. f D
//写成一行
. r" k$ W" F+ r
% S: N4 |, m. Y& M6 I0 {, p! v' Q OpenWindow.document.write("< TITLE>例子< /TITLE>")
# C i! S% s4 {' z* y$ r& U) U( i
OpenWindow.document.write("< BODY BGCOLOR=#ffffff>")
: J; \8 p9 A9 Q5 {& ~, E# p$ g8 C
OpenWindow.document.write("< h1>Hello!< /h1>")6 O/ T9 ]* ?/ U& R5 A3 ?
. @0 X6 R3 w9 {6 i3 P; l OpenWindow.document.write("New window opened!")! {5 i7 j( O& b8 q
, t0 h. n9 @( {% w) ]3 y. [# V OpenWindow.document.write("< /BODY>")8 \+ n0 H5 v5 {0 f% l
0 W' |$ _2 f# z6 y1 y: d OpenWindow.document.write("< /HTML>")
: w3 ]+ H h1 \4 M- l. j& }/ Q$ n ?* ~
OpenWindow.document.close()
% v& p8 y5 y O
+ ^$ k% b1 B+ C' _ }
; O/ i. {) g$ J: @6 M( C1 u/ ^# q* \; n6 @. M$ [1 M7 u. I! n
< /SCRIPT># R2 B: n8 ^2 K2 ^8 h4 `7 T5 W
' z6 B, _0 @' g' x
< /head>
; M! E5 ^ F% K; i( `
- p. w3 p: _' B8 V$ {8 f < body>
& A* z/ l# p* N v
' r9 D$ B @9 {8 e) P- }! q < a href="#" onclick="openwin()">打开一个窗口< /a>
6 H' b: a7 W1 d. S
8 O* Y Z( }- X8 V; {- s < input type="button" onclick="openwin()" value="打开窗口">- f1 i: v' V; Z3 r
4 C; p. R% q1 V
< /body>
! Y: x6 F% l9 [0 y9 w! s
! i3 o; x( |* ^0 ]( m < /html>
; h9 m9 L. T$ r1 d ?; Q w1 K" M9 b: P Q1 `6 M- ]
看看OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。 " F @# J- N1 b1 d# {' a0 B
7 {3 u/ q# ?& V1 c( h* J1 S# K9 m8 o 9、终极应用--弹出的窗口之Cookie控制
$ T" \9 |1 n# B9 v6 k- M) M5 L R. B0 v
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-( 7 J4 W% j1 B" ^- O
& c' v: j4 l' l, \ n( ~) A- F% }' o 有解决的办法吗?当然有!我们使用cookie来控制一下就可以了。首先,将如下代码加入主页面HTML的< HEAD>区:( p6 i+ z( x5 w7 c$ ~0 w9 l
0 j& \5 r/ w: S) z. U' |, j
< script>
6 Z$ g% ~; Q( j% P4 N3 L, D' r9 Z" v: J
function openwin(){; K1 I7 [6 o. ^
% D: y* I8 k& W- N0 W j) i window.open("page.html","","width=200,height=200")
5 ]: V9 B( ^. y# o) L6 F3 @2 F8 X4 y, v/ f) y: v# h3 [7 ]
}
' m) B4 G; {5 m+ F$ J7 M, q+ q/ n! ?5 u
function get_cookie(Name) {2 C. f; Q: V- n- D8 `0 p
$ l- x4 A/ `; B- f* f8 r0 T var search = Name + "=" var returnvalue = "";
# b' X) s, Q; ?: f" }- T# ]) c( d- @9 ]
2 W+ ?! t3 q. v3 T if (document.cookie.length > 0) {
0 J% m) G3 @- D+ O$ I5 D/ `8 ^8 ^. K6 c$ a
offset = document.cookie.indexOf(search)
; `% k4 r* \% t0 w3 d; T! S8 m1 h: e2 Z$ Y, C" P
if (offset != -1) {: T- H/ ]- U1 s, Y, x3 _+ Y% y2 E
: s/ Z4 k. L3 g7 H) P offset += search.length
, D% q6 B* R7 k6 _! t; F) K. a- F9 Z$ I/ \
end = document.cookie.indexOf(";", offset);+ w0 p2 r% {/ A3 R
: t7 h, s1 ~ F; p, y! ? if (end == -1)2 {. }$ P) J4 Q5 V
( A: f- k! O& O3 l3 F* b end = document.cookie.length;: E5 Z& [7 ~$ w, U9 M
2 Q% ?0 J3 W. {5 H5 T" K5 J returnvalue=unescape(document.cookie.substring(offset, end))
8 ^8 ?2 B: |$ s; p4 t3 m$ C0 L6 n3 q, `
}4 s" U, q* k4 L2 [) Z! x) v" A
" q! H9 \7 H6 \0 ~6 k }7 B7 M& q7 {5 U& N
) G& A( w- d' v0 q' z! R& g3 ?
return returnvalue;
/ p. T0 ^% s$ t R+ @. b) t# e) {. n% L7 y1 n3 x
}- |9 u8 D0 h% f) L; U+ M
# O* X3 R3 n, b$ o6 y8 H& Z
function loadpopup(){
8 }2 v& t3 Z4 g: m
/ v8 i: F8 J0 [" j6 l# W1 b if (get_cookie("popped")=="){" ?3 i: I; ?/ l! e N
6 ]; e; Q$ F7 S* h
openwin()4 q9 R$ u# h1 d! K: j) s/ k
! p2 N9 w2 n5 [ document.cookie="popped=yes"4 u3 Q( E: ]) {
: F: l; W! o) T$ c3 b
}- u% Q8 z2 a/ e
; p1 ?% }, ^" T7 W }5 X9 n2 u4 ^7 a# v/ w' ~& B
, ~( g$ I- T5 l < /script>
) g* K; S- V3 Z1 z% h7 b8 q" K9 K C
然后,用< body onload="loadpopup()">(注意不是openwin而是loadpop啊!)替换主页面中原有的< BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!
/ N! \/ _* u- l* |& L
2 V; j1 C% g, b: G/ Q: y3 @! q 写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。
8 ~( K* X0 J" T$ @/ G
2 W- r8 ^; ^5 L* s5 R8 y 需要注意的是,JS脚本中的的大小写最好前后保持一致。
" O, x2 U+ Q9 d9 y2 `8 f e# O+ `8 x" Y
|
|