有以下幾種方法可以實現iframe的高度自適應:
<script>
function resizeIframe() {
var iframe = document.getElementById('myIframe');
var iframeHeight = iframe.contentWindow.document.body.scrollHeight;
iframe.style.height = iframeHeight + 'px';
}
</script>
<iframe id="myIframe" src="yourPage.html" onload="resizeIframe()"></iframe>
<style>
#myIframe {
height: calc(100% - 50px); /* 50px為固定高度 */
}
</style>
<iframe id="myIframe" src="yourPage.html"></iframe>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#myIframe').on('load', function() {
$(this).height($(this).contents().height());
});
});
</script>
<iframe id="myIframe" src="yourPage.html"></iframe>