前因：某個項目為了統計效果，把諮詢的頁面視窗內嵌放進一個單獨的空頁面，在這個頁面裡加了個統計，讓人看著這個頁面就跟直接進入諮詢頁面一樣，懶得折騰啥js，直接用css弄了下，還好需求也不太高。OK了吧。
後果：因為接觸iframe很少，幾乎就沒用過，所以當時就Google、百度了下，也不記得當時都搜到了些啥個內容，反正需求也不太強，就直接用css解決了
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>頁面內嵌iframe設定寬高度為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-collapse:collapse; border}</style></head><body style="margin:0; padding:0;"><table cellpadding="0" cellspacing="0"> <tbody> <tr> <td><iframe src="http://www.111cn.net/" frameborder="0" marginwidth="0" marginheight="0"></iframe> </td> </tr> </tbody></table></body></html>
目測貌似把table去掉也是可以滴，沒有測試過的哦。
下面的兩種方法自選其一就行了。一個是放在和iframe同頁面的，一個是放在test.html頁面的。
注意別放錯地方了哦。
iframe代碼，注意要寫ID
<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>jquery代碼１：//注意：下面的代碼是放在test.html調用$(window.parent.document).find("#main").load(function(){var main = $(window.parent.document).find("#main");var thisheight = $(document).height()+30;main.height(thisheight);});
jquery代碼２：
//注意：下面的代碼是放在和iframe同一個頁面調用$("#main").load(function(){var mainheight = $(this).contents().find("body").height()+30;$(this).height(mainheight);});
HTML代碼：
<iframe src="http://www.111cn.net/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>Javascript代碼：<script type="text/javascript" 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
