要實現iframe高度隨內容改變的效果,可以使用以下步驟:
獲取iframe元素的內容高度。
將獲取的內容高度賦值給iframe元素的高度屬性。
為iframe元素添加一個事件監聽器,當iframe元素的內容發生變化時觸發。
在事件監聽器中,再次獲取內容高度,并將其賦值給iframe元素的高度屬性。
以下是一個示例代碼:
<!DOCTYPE html>
<html>
<head>
<style>
#myIframe {
width: 100%;
border: none;
overflow: hidden;
}
</style>
</head>
<body>
<iframe id="myIframe" src="content.html"></iframe>
<script>
var iframe = document.getElementById('myIframe');
// 獲取內容高度并設置初始高度
var initialHeight = iframe.contentWindow.document.body.scrollHeight;
iframe.style.height = initialHeight + 'px';
// 添加事件監聽器
iframe.contentWindow.addEventListener('resize', function() {
// 獲取內容高度并設置iframe高度
var newHeight = iframe.contentWindow.document.body.scrollHeight;
iframe.style.height = newHeight + 'px';
});
</script>
</body>
</html>
需要注意的是,上述示例代碼中的content.html
是一個單獨的HTML文件,作為iframe的內容。你需要將其替換為你自己的內容文件。