iframe标签用法详解(属性、透明、自适应高度)

iframe标签是HTML中的一个内联框架，用于在当前页面中嵌入另一个页面。它具有以下用法和属性：

用法：

<iframe src="https://www.mykuaidi.com/static/image/lazy.gif" class="lazy" original="https://www.mykuaidi.com/static/image/nopic320.png" frameborder="0" width="300" height="200"></iframe>

src: 指定要嵌入的页面的URL。frameborder: 设置边框的宽度，0表示无边框，1表示有边框。width: 设置iframe的宽度。height: 设置iframe的高度。

透明：如果想要让iframe透明，可以使用CSS样式来设置其背景色和边框样式：

<iframe src="https://www.mykuaidi.com/static/image/lazy.gif" class="lazy" original="https://www.mykuaidi.com/static/image/nopic320.png" frameborder="0" width="300" height="200" style="background-color: transparent; border: none;"></iframe>

注意：如果嵌入的页面本身有背景色或边框样式，需要将其相应的样式设置为透明或隐藏。

自适应高度：iframe默认的高度是固定的，但可以使用JavaScript来实现自适应高度。首先需要在嵌入的页面中添加以下脚本：

<script>function resizeIFrame() {    const iframe = document.getElementById('my-iframe');    const height = iframe.contentWindow.document.body.scrollHeight;    iframe.style.height = height + 'px';}</script>

然后在iframe标签中添加一个id属性，并调用resizeIFrame函数：

<iframe id="my-iframe" src="https://www.mykuaidi.com/static/image/lazy.gif" class="lazy" original="https://www.mykuaidi.com/static/image/nopic320.png" frameborder="0" width="300" onload="resizeIFrame()"></iframe>

这样，当嵌入的页面加载完成后，会自动调整iframe的高度以适应其内容的高度。

总结：iframe标签可以用于嵌入其他页面，可以通过设置属性来控制其外观和行为，可以通过CSS样式和JavaScript来实现透明效果和自适应高度。