海量企業(yè)網(wǎng)站模板 · 任您選擇
美出特色，精出品質(zhì)，一切為了企業(yè)更好的營(yíng)銷(xiāo)
度自適應(yīng)的實(shí)現(xiàn)方法有不少了，今天我們以css iframe高度自適應(yīng)示例來(lái)為各位引起一些js與jquery的例子，有興趣的可以和小編一起來(lái)看看。
前因：某個(gè)項(xiàng)目為了統(tǒng)計(jì)效果，把咨詢(xún)的頁(yè)面窗口內(nèi)嵌放進(jìn)一個(gè)單獨(dú)的空頁(yè)面，在這個(gè)頁(yè)面里加了個(gè)統(tǒng)計(jì)，讓人看著這個(gè)頁(yè)面就跟直接進(jìn)入咨詢(xún)頁(yè)面一樣，懶得折騰啥js，直接用css弄了下，還好需求也不太高。OK了吧。
后果：因?yàn)榻佑|iframe很少，幾乎就沒(méi)用過(guò)，所以當(dāng)時(shí)就谷歌、百度了下，也不記得當(dāng)時(shí)都搜到了些啥個(gè)內(nèi)容，反正需求也不太強(qiáng)，就直接用css解決了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>頁(yè)面內(nèi)嵌iframe設(shè)置寬高度為100% | 格桑的blog</title> <style type="text/css"> html, body, table, tbody, tr, td { width:100%; height:100%; overflow:hidden;} iframe { width:100%; height:100%; border:none;} table{ border-colla<a href="/fw/photo.html" target="_blank">ps</a>e:collapse; border} </style> </head> <body style="margin:0; padding:0;"> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <iframe src="http://www.cn.net/" frameborder="0" marginwidth="0" marginheight="0"></iframe> </td> </tr> </tbody> </table> </body> </html> |
目測(cè)貌似把table去掉也是可以滴，沒(méi)有測(cè)試過(guò)的哦。
下面的兩種方法自選其一就行了。一個(gè)是放在和iframe同頁(yè)面的，一個(gè)是放在test.html頁(yè)面的。
注意別放錯(cuò)地方了哦。
iframe代碼，注意要寫(xiě)ID
1 2 3 4 5 6 7 8 | <iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe> jquery代碼１： //注意：下面的代碼是放在test.html調(diào)用 $(window.parent.document).find("#main").load(function(){ var main = $(window.parent.document).find("#main"); var thisheight = $(document).height()+30; main.height(thisheight); }); |
jquery代碼２：
1 2 3 4 5 6 7 8 9 | //注意：下面的代碼是放在和iframe同一個(gè)頁(yè)面調(diào)用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
}); |
HTML代碼：
1 2 3 4 5 6 7 8 9 10 11 | <iframe src="http://www.cn.net/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe> Javascript代碼： <script type="text/<a href="/js_a/js.html" target="_blank">javascript</a>" language="javascript"> function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; if(ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; } } </script> |
蘇公網(wǎng)安備32030302000521