子頁面-
JS：
CSS：
HTML：
父頁面-
這是針對iframe父頁面在瀏覽視窗會自動帶出子頁面的網頁高度
適應式設計可以使用喔。
現在網頁設計很少使用iframe，
但是我待的某一家系統公司，目前還在首頁&自訂頁使用ifame，
所以有需要的可自取。
JS：
<script language="javascript" type="text/javascript">
function IFrameResize(){
//alert(this.document.body.scrollHeight); //彈出當前頁面的高度
var obj = parent.document.getElementById("indexiframe"); //取得父頁面IFrame物件
//alert(obj.height); //彈出父頁面中IFrame中設置的高度
obj.height = this.document.body.scrollHeight; //調整父頁面中IFrame的高度為此頁面的高度
}
window.setInterval("IFrameResize()", 200);//這裏的時間可以設置短一些，時間越短高度變動時抖動越不明顯
</script>
CSS：
<style type="text/css">
img {
max-width:1000px;
width:100%;
}
</style>
HTML：
<body onload="IFrameResize()"> <img src="test.jpg" alt="" /> </body>
父頁面-
<iframe id="indexiframe" scrolling="no" src="index.htm" frameborder="0" width="1200px" height="400px"></iframe>
這是針對iframe父頁面在瀏覽視窗會自動帶出子頁面的網頁高度
適應式設計可以使用喔。
現在網頁設計很少使用iframe，
但是我待的某一家系統公司，目前還在首頁&自訂頁使用ifame，
所以有需要的可自取。
沒有留言: