1. 程式人生 > >父頁根據iframe子頁內容調整iframe頁面大小

父頁根據iframe子頁內容調整iframe頁面大小

一.帶有iframe的父頁

1)html

<!DOCTYPE html>
<html>
<head>
 <title>帶有iframe的父頁</title>
</head>
<body>
    <iframe src="" id="businessPage" width="99%" height="150px;" style="margin:5px;" onclick="alert('aaa');"></iframe>
</body>
</html>

2)js

$(document).ready(function(){
    $("#businessPage").load(function(){//用於每次重新整理時控制iframe高度初始化
 	    //$(this).height(0); 
 	    var iframeHeight;
 	    if($(this)[0].contentWindow.getApproveBusinessPageHeight){
 	        iframeHeight = $(this)[0].contentWindow.getApproveBusinessPageHeight();
 	    }else{
 	     	iframeHeight = $(this).contents().height() + 40;
 	    }
 	    $(this).height( iframeHeight < 150 ? 150 : iframeHeight );
    });
 	$("#businessPage").attr("src", "${business.pageUrl }");
}); 

二.iframe載入的子頁

1)js

/*自定義iframe 高度的方法*/
function getApproveBusinessPageHeight(){
    return $("#comMenuFrame").height() + 40;
}