查看完整版本: 网页制作总结:iframe用法与注意事项

snowfox373 2007-10-23 12:43

网页制作总结:iframe用法与注意事项

iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。iframe是如何控制的很多人并不是十分了解，基本上还处于一个模糊的认识状态。
NS y4X&lK ,y/J Ih6L Q
　　iframe的两个注意事项,ifr是一个以存在的iframe的ID和NAME值：;u-Z)U1SX#@JJ
9n;x3] ~+g5]|dF
　　以下是引用片段：#vB7kh9d dHsb

"Ky Gh5V8z 以下是引用片段：R#F_;zY Hx+A
　　document.getElementById(“ifr”);
A\'Ubq 　　window.frames[“ifr”]; Yc0\N#Iq9VZ

c(I t;MD 　　要想使用iframe内的函数,变量就必须通过第二种方法.因为它取的是一个完整的DOM模型(不知道这样说对不对).第一种方法只是取出了一个OBJECT而已. 　　如果只想改变iframe的 src 或者 border , scrolling 等 attributes(与property不是一个概念,property是不能写在标签内的,比如:scrollHeight,innerHTML等),就需要用到第一种方法. 　　如果想取得iframe的页面(不是iframe本身),就需要使用第二种方法,因为它取得的是一个完整的DOM模型,比如想得到iframe的document.body的内容,就只能用第二种方法. 　　还要注意的是,如果在iframe的页面未完全装入的时候,调用iframe的DOM模型,会发生很严重的错误,所以,你要准备一个容错模式.d4[GX n7k

B(\*u^?X;\~P%H$G+d-r 　　下面是示例,一个是aa.htm,一个是bb.htm![code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
m8ef6J'w <html xmlns="http://www.w3.org/1999/xhtml" >   
r H3OG@R*F G_E <head>   
0q f@ } d V     <title>Untitled Page</title>   
__4q%{T*C(f'j <style type="text/css">   j0h:wGD9X~%|O
<!--   
![(_e(M7OtX body{   
6FPiH/sw ] M margin:0px;   
$M Zf;~ g$Q&g6uO"M }   
S&R'kg|8~)q {#F -->   SRY:o2g*`0hs
</style>   
tDU5t GkOR7U]4M </head>   
e PM uC.X.Sq&n <body>   7\ mw[.Tg Sq
<iframe id="ifr" name="ifr" width="100%" height="500" src="bb.htm"></iframe>   T/`PbB6}Fqdd
</body>   
1W { C:L0S </html>   !Y;e"?!T*c-B^t
<script language="javascript" type="text/javascript">   
c#hOvG%Ht var aa_value="I'm a variant in Top window!";   w Z`zy%D"@1So
var ifr_id=document.getElementById("ifr");   
^.Gz.j;Er var ifr_window=window.frames["ifr"];   
.] R9Qd+@O4\R Q^ alert("Alert from Top window : Can't get iframe's variant by ifr_id, it will return :" + ifr_id.bb_var);   2UcP.oO0SG,px"\*h
alert("Alert from Top window : Can't get iframe's DOM model by ifr_id ,it will return :" + ifr_id.window);    mDS!GrKG
alert("Alert from Top window : Get src from id :" + ifr_id.src);   
Ia-bn.N db6i*y alert("Alert from Top window : Get href from window:" + ifr_window.document.location.href);   
P~ e+{#c?8D6S%p/i //由于bb.htm可能还未装载完成,所以,下冇的可能引发错误    !u"T0x%^ }k
//调用iframe内的函数 ifr_window.bb();   GUq.j b%N~{Vr
//调用iframe内的变量   :TaYoO
alert("Alert from Top window : " + ifr_window.bb_var);   AMyuJUj
//   
(`6^Pg ^L{ alert("Alert from Top Window :" + ifr_window.document.body.innerHTML);   8ST/y3y?m+R
function aa(msg){   
6I6A3v2Kjh.G     alert("I'm  alerting from Top window ,and I received a msg:\n" + msg);   ^ CrNJe1x0iE$M0mF
}   $Q*y3~,OP7_6Q0Q[8?#|(d
</script> [/code][code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
:g)W5ZFt7t1`qI/q <html xmlns="http://www.w3.org/1999/xhtml" >   
/[2L%]C0s r"` <head>   ['AP%u@ k/jf1zv
    <title>sub frame</title>   1Xa:E'S V9j_
<style type="text/css">   
-X)d mN Bu)i <!--   
*n"~p ],u html,body{   
1q7L7}+S N1U1w/Jq5[8M margin:0px;   
"`{2H ?s$A_3g^ width:90%;   )SE;Ct`5p {+`
}   7NbX1xZ%a
-->    C'X!]3i@ O8f;j(Y
</style>   
GQm'mg7xdR n </head>   
(p+{1r6PA"gd <body>   j,e6X+}'C
    I'm a sub frame!   
PH vaE,c6S6S&f        (H)^Uw+UWv'b

4rU"Ow/N7p!uS    
+{!`;}~+FM+K     ...&B(F&^ kdIg-P
   
qD^mb8A     ...
J!E K,VMN Tm    9\,W0r;v$FE5U(wC,zr/g
    ...Rv%~$B(J:js k M
   EL}de"B/t5u_ H
    ...
q'Z2I.z0p9UM H:k    
O@ Y7y vQ     ...BTH2]O s
   2PQo5U A
    ...O ?7t6~yJ^G
   
SwP.H%t,z     ...h3A8`H.T8O
   
6|$W-N;u,a~"u"B     ...
[Ny-OU7By    i6{+zt9L#q#}!?A ]^)N \
    ...%F*f.[0o-R {m:L
   
-R*|R3v H+?     ...'Y(yN~ F~Rq,d N
   xk {0qWlA/p#Ofm+^ M
    ...
[!wG7Od&].lJ    +Nn+j v2v ]7a t4G
    ...
*wz GF{n    
i;hS{l E5a?+|Nu9Z     ...LG,tTO)xp-p4It
   
CUta Gi     ...
A,u!V(fCok)?b    
I iq&T V R\-g+^     ...
0Rlw|g;z5FxV{     ]}2{Uk0mCze
    ...
s+[)A+G']M    
U:{Lt#F3I)h8C$s*w     ...
~\HM d6E"d,bg     gt`F7zb7S'gb&D
    ...p3d!rzY5k|"s3|5[X
   )` G7R%l"V&T|
    ...@?HPY2pQ
   
0M;h7\cT;i%O     ...6utt/rUTPn
   
Wl7|8ERbU$M2oj6N L     ...
(D\'\7w#Z%XX    3F?5\ B)i4u&w[j
    ...
S(GD;Y"RNC     s:_/UoHK3F*PV` t
    ...2cqqB1X JOS
   
!zYR4a,G b     ...
}bB:O5Q1t[`    
+u,W*u&}]ah5xw     ...
bP%J+O$M-{ r    
iDa4W)k     ...
V%|bS)b V s8K0jK,p    
r6n%Q;p8b     ...4NL `/n)t P*My cL
   
[ z1Q eX7hm     ...hD)A-pz,U~
   &M6o9a|1L4pHp"J
    ...
l/fva? E9_f?\    
#]|6W ?*t8k5t     ...
xt O'K%Fb    r9?d{PO#~1]1O:M
    ...
"ZP*i"Y)EuR7S8k    :x)Wt0q:?&R"Gp.A
    ...VF.FV+Mw,V aH#}
   Nrz,Iwq i}
    ...;Y7s Vr0`%M|7l9[C8SV
   
QH;y2Co%w     ...
T:}-uG K:u ^H    
p/p3xan;w     ...-^#p6BByx Y
   oQi-gg u
    ...8N-? Lvv
   c4?_$w"DH
    ...4z:KIh?[o!y.x4O_wc
   
)u^-aKa0gB     ....` ^2B7Y+Q7g-a^[
   
cTSdD?G5X     ...7F&s!iV `3s&y
   
L3ZYCZ*Xq     ...
0t5\3nN o? \    6G*s }#m)J&A:hu)F
    ...
1QA:uL&L2X{N0~ \    GF*XW9B
    ...   
4}6DNa;xr#N H8w </body>   9Q"Q/p9vc r
</html>   %y X8f-j%Zg"?
<script language="javascript" type="text/javascript">   
+H6MG;j i*D;f var bb_var="I'm a  variable in ifr";   uqw!^.W
function bb(){   
4me Fp1Due     alert("Alert from iframe :I'm frame ifr's function")   
d-L R7u!o*R5H)}~ }   /fV*f/B(Z2gi,_q
//获取父页面的变量   )Q:@ c"jX9SvxW
alert("Alert from iframe parent.ifr_id::" + parent.ifr_id);   
/G5Tl p4Kr_*I alert("Alert from iframe parent.aa_value : " + parent.aa_value);   3bH:cuR/u
//通过父页面的ifr_id来改变 iframe的高度   
E-A*`kC q6zc/m alert("Alert from iframe : ifr's clientHeight :" +document.body.clientHeight);   
q3a4U}5Ohg2n parent.ifr_id.height=document.body.clientHeight;   
9|1Q#HU$m$Z4~-M alert("Alert from iframe : ifr's scrollHeight : " + document.body.scrollHeight);   
Z&]yUE'V%v7{3Jc //调用父窗体的函数:   
{V!q\.Gv parent.aa("I will calling a function which is Top window's ");   
/R2t!bMx //改变父窗体的标题:   
+R'iM)E*N U c(ym4P alert("Alert from iframe : I will changing Top window's title");   k7o(j|V
top.document.title="The title value changed";   "CG^f t-P T`
//通过父窗体的ifr_id来改变的border 与scrolling   
m~"R`;_6m alert("Alert from iframe : I will change my border and scrolling :");   
f1?aC-ob:x top.ifr_id.border=0;   
S7n j2UT3pv top.ifr_id.scrolling="no";   
$F?pTt J </script> [/code]
页: [1]
查看完整版本: 网页制作总结:iframe用法与注意事项