首页多个iframe自适应高度

多个iframe自适应高度

时间: 2023-11-02 16:01:01 浏览: 106

您可以使用JavaScript来实现多个iframe自适应高度的效果。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>多个iframe自适应高度</title> <style> .iframe-container { position: relative; padding-bottom: 56.25%; /* 这里假设iframe的宽高比为16:9，可以根据实际情况进行调整 */ height: 0; overflow: hidden; } .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <div class="iframe-container"> <iframe src="https://example.com" frameborder="0" allowfullscreen></iframe> </div> <div class="iframe-container"> <iframe src="https://example.org" frameborder="0" allowfullscreen></iframe> </div> <script> function resizeIframe(iframe) { iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px'; } window.addEventListener('DOMContentLoaded', function() { var iframes = document.getElementsByTagName('iframe'); for (var i = 0; i < iframes.length; i++) { iframes[i].addEventListener('load', function() { resizeIframe(this); }); } }); </script> </body> </html> ``` 在上面的示例代码中，我们使用了CSS来创建了一个具有固定宽高比的容器，然后将每个iframe放置在这个容器内。通过设置容器的padding-bottom为一个百分比值，可以确保iframe的高度按比例自适应。通过JavaScript的load事件监听，当每个iframe加载完成后，调用resizeIframe函数来动态设置iframe的高度，以适应其内容的高度。您可以根据实际情况，修改代码中的iframe的src属性和容器的样式。这样，多个iframe就可以根据各自内容的高度自适应显示了。

阅读全文