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

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

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

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

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

×
先申请精华~ 3 b* H; n5 q( Y1 C ( E q a2 o. e2 z看完一定要顶啊~9 l7 d0 L6 \9 ? # f/ B+ Q4 G- {% \5 D% ` 先说明,这个办法只限于iframe中的子页面也是本地页面(不能引用外网页面)- ]0 f: P5 {* _9 v7 u `' O: \ 3 E3 e$ w4 z M( b( Z( k======方法=====, ]" j$ y0 [) S& i& d. [ 第一步 js部分. G+ o3 w) i; } @+ c% ` / y3 b2 e' |% C, h" h6 F2 i function getSize() { 5 `4 w2 S! x" @. r var xScroll, yScroll; 2 y" l/ I9 n3 F7 j( m1 E3 a if (window.innerHeight && window.scrollMaxY) { 5 z* d( U0 ^, \1 D. j" H xScroll = document.body.scrollWidth; 6 g2 V& ^5 y( g6 t9 v yScroll = window.innerHeight + window.scrollMaxY;. r, e- \9 o; q1 l G, w } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac# |( x+ b) w( @1 z9 V4 T xScroll = document.body.scrollWidth; " x V+ c( S7 C* K' { P yScroll = document.body.scrollHeight;% g" o$ M y0 Q; U* F* | } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari& J6 Y4 {5 Z5 o- h' K- @0 i A; ] xScroll = document.body.offsetWidth;7 h* v; R2 i: C* m- }+ B yScroll = document.body.offsetHeight; ' I4 H4 T: z$ x7 l% W. h2 d. Q } i5 y! ?- T& B- f1 S* ]# ^8 y! ? var windowWidth, windowHeight; 3 r4 R* e* f; o if (self.innerHeight) { // all except Explorer! _3 N- l' N# B9 x; T windowWidth = self.innerWidth;8 U2 x6 O* D2 `7 C9 ]( |9 K0 ? windowHeight = self.innerHeight; : n/ u) x2 f7 C0 r4 l% G% w4 ~! n } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode% @( r# `1 t0 ^ windowWidth = document.documentElement.clientWidth; / B( F% C: g" i windowHeight = document.documentElement.clientHeight;2 M4 \+ R$ [$ {1 ^ } else if (document.body) { // other Explorers) _, k, n$ d" S" h* f windowWidth = document.body.clientWidth;7 G# m3 D6 h( h5 p windowHeight = document.body.clientHeight; 6 }8 e+ x1 j" B% r9 B } % k* q7 V0 Q; `5 t3 L# i9 O0 w & n% K' L, C0 { // for small pages with total height less then height of the viewport 4 \- {% u% u( t" U- y if(yScroll < windowHeight){4 s, A4 v3 q$ e5 W" o& @ Y4 [ pageHeight = windowHeight;" J$ v* K: J$ m% Q, s8 @ y = pageHeight; _. @" x/ y& I7 l6 ] } else { 3 P$ F9 _& r) V1 h pageHeight = yScroll;$ T3 q, d3 X2 |+ D' B' q y = pageHeight;+ s- a* c% U$ g8 C& s9 W1 o; b0 j }3 q" P9 O3 O. v2 i2 d k / B: h* e% I8 O4 T( x8 ~5 D if(xScroll < windowWidth){ / Q7 ?, D, w" b" ~; t, D' E9 E1 ~ pageWidth = windowWidth;+ C# M$ k; L. M. C } else {( h) k; O! e i! I$ G0 E; O* D2 _2 P* b pageWidth = xScroll;3 b' G- H9 U$ ~0 J: H/ u2 \ }; `. C1 x( \" k1 W, q5 i) X $ {8 w0 t# z+ B9 p0 x arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) " N0 X6 m) S o0 K# j return arrayPageSize; 0 U" N4 F% ]" {}! F' H' ?# F/ b 这段代码用来获取目标页的参数,包括页面高、宽,屏幕高、宽 8 F" g0 ~6 R0 M% k* {: {9 X/ S2 Q! |5 S function autoHeight(pid) {' V9 e# v" B! S% ~3 x var x = new getSize(); 1 q$ ~; X6 C5 j7 c! x parent.document.getElementById(pid).height=x[1];8 J2 l/ s+ Y9 x4 M } + f5 I9 g& L3 [/ m这段代码用来实现父页面中iframe的高度自适应 3 j% w, O4 q$ j- k# ~! @/ c% m* _! x \\\\\\\\\\* o$ q5 t+ X0 {9 B1 y$ [0 B4 l / u" k) M5 I4 b7 R第二步 页面部分: r! J& H$ _6 K: B) a + f" `$ \& ?/ P3 K1 a, b/ Z1 F <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>- C0 D6 \& ^- z 这是父页面的iframe,没什么特别的,和普通的iframe一样,不过要设置好id值,以便子页面的参数调用。: Y/ u1 |$ }$ l& r: ?8 ^ : Z0 p2 F5 E2 P' T# Q7 G( k <body ></body>; z4 ~! q) G8 G/ y2 V6 z* Y 在body中利用onload事件,将自身的高度传给父页面的iframe。/ z% O; M+ l; E , [; B# z! @9 e7 c) j6 Y \\\\\\\\\\8 m& ?/ k" B& N. F- i 3 T) K- Y# E0 n2 I: s( ` 打完收工~本方法在IE6,FF2,XPsp2下顺利通过,FF无报错~
遨海湾-心灵的港湾 www.aosea.com
您需要登录后才可以回帖 登录 | 入住遨海湾

本版积分规则

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

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

GMT+8, 2025-4-25 01:56

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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