iframe高度自適應解決方案

螞蟻小編發表於2017-03-25

關於iframe高度自適應問題其實是一個探討已久，並且有大量解決方案的問題，當然不算事新問題也不算是有難度的問題。

不過這裡再重複介紹一下，希望能夠給需要的朋友帶來一定的幫助，直接看程式碼。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
*{
  margin:0px;
  padding:0px;
}
</style> 
</head>
<body>
<iframe height="100%" width="100%" scrolling="no"  src="http://www.softwhy.com"></iframe>
</body>
</html>

從上面的程式碼可以看出iframe的高度並沒有實現自適應效果，下面就通過程式碼例項介紹一下如何實現高度自適應效果。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
$(window.parent.document).find("#iframe").height($("#content").height());

上面這段程式碼是在子視窗使用，獲取父視窗的iframe標籤元素，然後再將iframe的高度設定為子視窗內容的高度。

不過存在著跨域問題，具體可以參閱iframe實現跨域高度自適應程式碼例項一章節。

相關文章