溫馨提示×

iframe自適應高度的方法有哪些

小億
112
2023-07-11 10:46:47
欄目: 編程語言

有以下幾種方法可以實現(xiàn)iframe自適應高度：

  1. 使用JavaScript動態(tài)調(diào)整iframe的高度：通過使用JavaScript獲取iframe內(nèi)容的實際高度，然后將其應用到iframe的高度屬性上，從而實現(xiàn)自適應高度。
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="example.html" onload="resizeIframe(this)"></iframe>
  1. 使用jQuery的方法：可以使用jQuery的方法來獲取iframe內(nèi)容的實際高度，并將其應用到iframe的高度屬性上。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$('iframe').on('load', function() {
$(this).height($(this).contents().find('body').height());
});
});
</script>
<iframe src="example.html"></iframe>
  1. 使用CSS的方法：通過使用CSS的height: auto屬性，使得iframe的高度自動適應其內(nèi)容的高度。
<style>
iframe {
height: auto;
}
</style>
<iframe src="example.html"></iframe>

這些方法可以根據(jù)具體的需求選擇使用。

0 踩