<iframe>高度自適應程式碼例項

antzone發表於2017-03-22
原文網址 : https://www.softwhy.com/article-4222-1.html

本章節通過程式碼例項介紹一下如何實現iframe高度自適應效果，因為在實際應用中，我們往往需要<iframe>的高度能夠隨著引入頁面內容的高度變化而變化，這樣可以讓頁面能夠有融為一體的感覺。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  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> 
</head>
<body>
<iframe src="iframe.html" id="iframepage" name="iframepage" width="100%"></iframe>
</body>
</html>

以上程式碼可以實現高度自適應效果，但是不能夠實現跨域高度自適應，如要實現跨域高度自適應，具體可以參閱iframe實現跨域高度自適應程式碼例項一章節。 

相關文章