今天有朋友問到我關于“iframe自適應高度”的問題，原本以為是很簡單的問題，沒想到折騰了20分鐘才搞定。期間遇到幾個問題，要么是高度自適應了，但是當窗口改變時會出現滾動條。也就是當窗口放大時iframe沒有自動跟隨變大顯得很小，或是當窗口縮小時iframe還是之前那么大就出現了滾動條。還有或是高度不準確，那么就達不到想要的效果了。

為什么需要使用iframe自適應高度呢？其實就是為了美觀，要不然iframe和窗口長短大小不一，看起來總是不那么舒服，特別是對于我們這些編程的來說，如鯁在喉的感覺。

首先設置樣式

body{margin:0; padding:0;}

如果不設置body的margin和padding為0的話，頁面上下左右會出現空白。

html代碼如下

<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" frameborder="0"></iframe>

下面就是今天小編寫的時候遇到的問題，考慮到有些朋友可能沒怎么用jquery就直接用js吧。

方法一

var ifm= document.getElementById("myiframe");
ifm.height=document.documentElement.clientHeight;

這個方法可以達到讓iframe自適應高度的效果，但是如果你將窗口放大或縮小效果就不出來了，也就是本文開頭講的。需要再次刷新，那就不屬于自適應了。

那么問題來了，需要解決當窗口改變大小的時候執行js事件，以讓iframe自適就高度。那么就需要將相關的代碼寫成函數，并且給iframe加上onLoad="changeFrameHeight()"，也就是下面的方法二了。

方法二

<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" onload="changeFrameHeight()" frameborder="0"></iframe>

js代碼也得跟著改

<script type="text/javascript">
	function changeFrameHeight() {
		var ifm = document.getElementById("iframepage");
		ifm.height = document.documentElement.clientHeight;

	}

	window.onresize = function() {
		changeFrameHeight();

	}
</script>

window.onresize的作用就是當窗口大小改變的時候會觸發這個事件。

所以，使用方法二就可以完美的、真正的讓iframe自適應高度了，試試看吧，并且兼容多種瀏覽器

本文轉自：https://blog.csdn.net/alex8046/article/details/51456131

總結

以上是生活随笔為你收集整理的让iframe自适应高度 兼容多种浏览器随着窗口大小改变的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。