用IFRAME实现网页的内嵌和预载
上一篇 / 下一篇 2007-08-16 14:41:18 / 个人分类:HTML
iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。其部分属性简介如下:51Testing软件测试网!gPv9YMp
-th@$B0E"A0 name:内嵌帧名称51Testing软件测试网'[{`|A1M y:R `B
51Testing软件测试网1i LH+B#`U S Bwidth:内嵌帧宽度(可用像素值或百分比)
Fy.u]h`(uG051Testing软件测试网(i0p(|s6_'M!m,R~height:内嵌帧高度(可用像素值或百分比)
2g*d8PHu"Yk-M#Aa+r051Testing软件测试网U;~5U-[[R#ghxframeborder:内嵌帧边框
4G+SCC }.N5l)Ws051Testing软件测试网X#d:Zw.U'N1{marginwidth:帧内文本的左右页边距
7P/F] cl"o051Testing软件测试网3C!pl`8j;Aj smarginheight:帧内文本的上下页边距
};FMv;e{b051Testing软件测试网5cAx?5]Y[,yJscrolling:是否出现滚动条(“auto”为自动,“yes”为显示,“no”为不显示)
.QN1ujB1w U0E]"QMSbToB0 src:内嵌入文件的地址
m+\.b$u%X051Testing软件测试网2O#S0Sc*N*@style:内嵌文档的样式(如设置文档背景等)51Testing软件测试网0p"w)m FTB2O0^
AmMd6b9O0 allowtransparency:是否允许透明
%dt9T-X$@ij8I'@@ g0-y4XzgDn0 明白了以上属性后,我们可用以下代码实现,在main.htm中把samper.htm文件的内容显示在一个高度为80、宽度为100%、自动显示边框的内嵌帧中:51Testing软件测试网f:v-J{'Mg m3Pc^
51Testing软件测试网g{)V&p,e7[ 〈iframe name="import_frame" width=100% height=80 src="samper.htm" frameborder=auto〉51Testing软件测试网H:R&]:D:o
U%E O.rA
〈/iframe〉
1j*KBu\0 不错吧,马上“Ctrl+C”、“Ctrl+V”试试。
-o_)tk(xh,jLfS051Testing软件测试网 QR;Jn[ g有时我们为强调页面的某项内容,想让它先于页面的其他内容显示。同样用iframe即可轻松实现:51Testing软件测试网Lx&Huft6I
qV9ebBR?0 先把要强调显示的内容另存为一个文件,如first.htm,然后通过一个预载页index.htm,内容如下:
:x!B!S%tn051Testing软件测试网"WS6?H0X y〈meta http-equiv="refresh" content="3,url=index2.htm"〉
bG.s]6n@F'B0[.HP?;Y J'zS8T4~0 〈body〉
9Ghe fE Yam0Y iS"y;Og(|K0 页面加载中,请稍候……〈iframe src="first.htm" style="display:none"〉〈/iframe〉51Testing软件测试网]Aqi!u*c
J]m2L9t!eXM4d)Wl0 〈/body〉51Testing软件测试网!Pd({ |%Wd,pg
51Testing软件测试网zm2F9N:X~ R主文件index2.htm
;Kx nS8S"iB0II7[3b{d @:u6on&k0 〈body〉
-z'?g8kr)Q051Testing软件测试网 y@(@%f1@ ~〈iframe src="first.htm"加入其他属性限制〉〈/iframe〉
s@KU ]051Testing软件测试网Hkqy)C〈/body〉
#v(]!yzD051Testing软件测试网 N1n(c4s\ Z{$EFTfirst.htm的内容就会先于页面的其他内容出现在您的浏览器里了51Testing软件测试网eE:W1zk+L
2X|m8LbIW0//META标签的奥妙
x4P.@ W4mA-V,{f051Testing软件测试网wH2`n0S(L#RMETA标签,是HTML语言head区的一个辅助性标签。在几乎所有的page里,我们都可以看到类似下面这段html代码:
RSf0o^@8k]!@051Testing软件测试网ho6d }&X_-XJ-----------------------------------------------51Testing软件测试网^#R8A+q0ID5g,C9T|
<head>51Testing软件测试网)J|"b*i:I7f0@
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">51Testing软件测试网V$i:ZS2j/i
L
</head>
!Yps6g!vu0-----------------------------------------------