温馨提示×

iframe自适应高度的方法有哪些

小亿
112
2023-07-11 10:46:47
栏目: 编程语言

有以下几种方法可以实现iframe自适应高度:

  1. 使用JavaScript动态调整iframe的高度:通过使用JavaScript获取iframe内容的实际高度,然后将其应用到iframe的高度属性上,从而实现自适应高度。
<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内容的实际高度,并将其应用到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的高度自动适应其内容的高度。
<style>
iframe {
height: auto;
}
</style>
<iframe src="example.html"></iframe>

这些方法可以根据具体的需求选择使用。

0