[英]Dynamic iframe height
我有個問題。 我正在處理一個由中央 div 和其中的 iframe 組成的模板。 div 應根據 iframe 的內容動態調整大小。我嘗試了此處找到的其他解決方案,但沒有結果。 我正在使用以下 HTML 代碼:
<div id="site_content" style="position:relative; width:445px; height:500px;">
<iframe id="mainframe" name="mainframe" onload="parent.adjustIFrameHeight();" FRAMEBORDER="0" scrolling="no" style="overflow:hidden; border:none;" src="http://www.letsapp.it/alecianetti/" width="445" height="600"></iframe>
</div>
我希望 div (#site_content) 在 iframe 內容更改時動態調整大小。 我試過這個 function 但我不是很擅長使用 js 和類似的東西(我現在正在研究它們;))所以我不知道它是否有用或正確
onload="parent.adjustIFrameHeight();"
為了讓您了解結果,我給您鏈接了ThemeForest Wave CV的演示站點,這是我正在復制的模板。
誰能幫我?
剛剛試了一下!
<script type="text/javascript">
function setIframeHeight(iframeName) {
//var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if (iframeEl) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
//var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
var h = alertSize();
var new_h = (h-148);
iframeEl.style.height = new_h + "px";
//alertSize();
}
}
function alertSize() {
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
//window.alert( 'Height = ' + myHeight );
return myHeight;
}
</script>
</head>
<body onload="setIframeHeight('ifr');">
<center>
<iframe id="ifr" src="yourdomain!" onload="parent.adjustIFrameHeight();" width="850px" scrolling="no" ></iframe>
</center>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.