iframe 跨網域隨著嵌入網頁中的內容，自動縮放iframe高度

梅干 2021/05/05 1 分鐘閱讀

　　iframe至今還是一個相當好用的內嵌之框架，由於網頁是透過iframe的方式嵌入，因此完全不會干擾到原來的版面樣式，甚至透過iframe將網頁包覆住，讓它也具有獨自處理的能力，雖然iframe固然好用，但有一個令人感到相當困擾的問題就是高度，再加上載入的網頁，會不斷的變換內容時，當嵌入的iframe高度設為固定時，就會出現不是頁面出現捲軸，就是下方空白一大塊。

因此在很早之前，梅干曾分享過一篇iframe高度自動延展的小範例，讓iframe會隨著嵌入內容的多寡，而自動的調整iframe的高度，但卻會發現到，現在此方法已效，因此梅干花了點時間研究了一下，目前新的寫法，則是透過iframe相互傳值的方式，來改變iframe的高度，像是梅問題教學網，下方的留言區，就是透過iframe的方式嵌入，因此當有人留言時，則會自動的調整iframe高度！所以有需要的朋友，現在也一塊來看看囉！

iframe.html

<iframe src="source.html" id="myIframe" width="100%"></iframe>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(function(){
	function receiveMessageFromIframePage (event) {
		var height = ('receiveMessageFromIframePage',event.data.h);
		console.log(height);//接收source.html頁面所回傳的高度值
		$('#myIframe').height(height);//將取得的高度，變更myIframe高度	
	}
	window.addEventListener("message", receiveMessageFromIframePage, false);//監聽receiveMessageFromIframePage
});
</script>

source.html

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
	$(function(){
		var _h = $(document).height();//取得網頁高度
		parent.postMessage({ h: _h}, '*');//將高度值，傳到父層
	});
</script>