jquery 實現iframe 自適應高度

jiangys發表於2013-10-18
jQuery

轉自： http://www.cnblogs.com/luluping/archive/2009/04/17/1437843.html

超級簡單的方法，也不用寫什麼判斷瀏覽器高度、寬度啥的。
下面的兩種方法自選其一就行了。一個是放在和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);
}); 

測試過，第二種有效，不過要注意一點是，增加的JS要寫在iframe下面，放在頭部是測試沒有效果。
測試程式碼：

 

                <iframe id="mainframe" name="mainframe" marginwidth="0" marginheight="0" src="/Home/Activitylist"
                    frameborder="0" width="100%" scrolling="no" height="100%"></iframe>
                <script type="text/javascript">
                    //注意：下面的程式碼是放在和iframe同一個頁面呼叫,放在iframe下面
                    $("#mainframe").load(function () {
                        var mainheight = $(this).contents().find("body").height() + 30;
                        $(this).height(mainheight);
                    });
                </script>

 

 

 

 

 

 

 

 

 

相關文章