找回密码
 入住遨海湾
搜索
网站解决方案专享优惠-3折上云
查看: 1115|回复: 0

让iframe自适应高度(支持XHTML,支持FF)

[复制链接]
发表于 2007-10-10 15:00:00 | 显示全部楼层 |阅读模式

登录后查才能浏览下载更多咨询,有问题联系QQ:3283999

您需要 登录 才可以下载或查看,没有账号?入住遨海湾

×
先申请精华~( B. [5 J) ^. d h ! m) d# E, e. p5 ~! `* _& I 看完一定要顶啊~% z9 j3 b1 F X0 [; \ % g+ ~9 n2 r# m8 i* W& T- I 先说明,这个办法只限于iframe中的子页面也是本地页面(不能引用外网页面) # P! U6 B$ v% ~: R1 _1 i 2 w, A$ Z1 R+ p: X8 }* w======方法===== 5 \3 q7 _( |- _( M' \: \; G第一步 js部分7 H6 J! n6 X2 @, V2 L * g7 I2 D ]% ]3 [/ M function getSize() {1 S/ v1 r' L; i/ Y' O$ c; x var xScroll, yScroll; " w' |3 U. ~5 p! O. I if (window.innerHeight && window.scrollMaxY) { , ]5 E' G% G9 L4 b2 B xScroll = document.body.scrollWidth;+ F4 j( X$ w* Z+ U4 w9 j yScroll = window.innerHeight + window.scrollMaxY; ' S. P5 a0 y- ^+ M. r% E } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac+ Z7 Y2 U: J3 K6 A( f8 j4 s xScroll = document.body.scrollWidth; - P6 F. D5 Q+ [# d yScroll = document.body.scrollHeight;: a+ {6 L: P) z } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari3 ^& h- i4 Y# O$ M* ~ xScroll = document.body.offsetWidth; + R$ y. p- i& p; H2 A0 j8 { yScroll = document.body.offsetHeight;- ], o+ X" @; [+ H; I8 H# q% ?6 f }7 g/ I, i8 M8 P8 @3 X $ [. T& K1 m: h$ i var windowWidth, windowHeight; 1 Q# ~! n7 T* @2 o4 R/ A1 c if (self.innerHeight) { // all except Explorer* o2 u( i8 h# W% R3 l, c: f windowWidth = self.innerWidth; ( y5 b, D' I( D: e. n' F windowHeight = self.innerHeight; 3 R( \3 B; h. o- A7 I J1 ` } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode / ^7 s! x5 z5 u) R% ^, P' T/ T$ D& t windowWidth = document.documentElement.clientWidth; 2 o' \. G/ G3 n7 O windowHeight = document.documentElement.clientHeight;8 F% U7 @2 h3 W! N } else if (document.body) { // other Explorers * v# H! n2 C& U7 h2 { windowWidth = document.body.clientWidth;+ k$ L+ n, n- @ windowHeight = document.body.clientHeight;) q2 W) y7 ~) o/ j } , ?2 w1 \( Z! s! G " G" v4 s" ~) E0 O // for small pages with total height less then height of the viewport3 u+ k. i/ Z# D: O" Q; [ if(yScroll < windowHeight){( W ?% n, {) x* ~3 } pageHeight = windowHeight;3 {4 J& \& j. t* v' u1 ^* y y = pageHeight; & t \0 F) o; }1 J, c+ z( f } else { 3 g: Q# A% b: d m) ~4 a pageHeight = yScroll; 9 S1 r+ m5 \- `0 I y = pageHeight;* {# o; m; p N( O7 x9 ?' m9 n }, X" T2 D$ }2 C7 ]& o+ G 9 M' y7 E( d* M if(xScroll < windowWidth){ - K" Y0 G4 H v" K3 V6 P1 G3 x7 Y pageWidth = windowWidth;3 V+ u/ b& m; N/ ~2 z' F } else {* J% N' f! B+ H pageWidth = xScroll;9 m. X) D9 s$ ^ }7 C0 }3 k7 [% R3 U& w% C ; ^- `+ d4 b0 L/ g' z* {+ i9 {0 ] arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 0 v2 _, E. r0 e! e D0 }/ M return arrayPageSize;# C( \5 T I% i& ]0 A6 ^+ [. d }& D3 I3 p% b1 |# t3 B: `7 R- P8 z) b' r 这段代码用来获取目标页的参数,包括页面高、宽,屏幕高、宽& A( s! b! I: e8 Q ! A* u, N% l% t4 a1 nfunction autoHeight(pid) {% j8 Q# Z* ]! a. v var x = new getSize(); . S# G) Y% ^9 ~7 |4 ` O4 ~ parent.document.getElementById(pid).height=x[1];0 ^4 n6 |/ t+ M; V0 {! l& G2 Q ]+ f } ; {; q P1 _2 E) p9 x" V这段代码用来实现父页面中iframe的高度自适应& w! V1 u5 F& p T. x & i9 [ ?/ p- w8 \* L! b7 a \\\\\\\\\\$ ]/ K1 ~- G; F8 ` / `6 I' s; k' g" e 第二步 页面部分 : V6 K/ E9 p( a' E2 H7 g, n, s8 k5 b! D) _0 {! p# n$ T/ e <div class="onright" style="width:480px;"><iframe id="infrm" name="infrm" marginwidth="0" marginheight="0" width="100%" src="park.htm" frameborder="0" scrolling="auto"></iframe>; K9 L3 Q) S2 x% z4 U" h, \! Y 这是父页面的iframe,没什么特别的,和普通的iframe一样,不过要设置好id值,以便子页面的参数调用。! z) l9 C$ v8 Y! Y+ ^: e3 C! ^ " O8 p& E$ ]- P9 h <body ></body>- Y, C7 V+ e! I" C( s 在body中利用onload事件,将自身的高度传给父页面的iframe。# L7 P( W! E' l* V5 p1 b 9 O0 y4 Q0 w1 z\\\\\\\\\\. q6 [9 M2 p( C; B4 k " U: p6 M; T/ n8 R# t' }, I0 K 打完收工~本方法在IE6,FF2,XPsp2下顺利通过,FF无报错~
遨海湾-心灵的港湾 www.aosea.com
您需要登录后才可以回帖 登录 | 入住遨海湾

本版积分规则

网站解决方案专享优惠-3折上云

QQ|手机版|小黑屋|遨海湾超级社区

GMT+8, 2025-4-4 22:48

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表