iframe去边框、无边框使用大全(实践经验整理)

去边框

方法一：使用CSS样式去除边框

<iframe src="https://www.example.com" style="border:none;"></iframe>

使用样式border:none可以去除iframe的边框。

方法二：使用CSS样式设置边框颜色为背景色

<iframe src="https://www.example.com" style="border:1px solid #fff;"></iframe>

使用样式border:1px solid #fff;可以让边框颜色和背景色一样，看上去就像没有边框一样。

无边框使用

方法一：设置iframe高度

<iframe src="https://www.example.com" scrolling="no" height="600"></iframe>

使用height属性可以设置iframe的高度。这样，即使没有边框也能显示出iframe的完整内容。

方法二：使用CSS样式设置宽高

<iframe src="https://www.example.com" style="position:absolute;width:100%;height:100%;left:0;top:0;border:none;margin:0;padding:0;overflow:hidden;"></iframe>

使用CSS样式可以设置iframe的宽度和高度为100%，这样即使没有边框也能够完整显示iframe的内容。同时，需要将margin和padding设置为0，overflow设置为hidden，以保证页面布局的完整性。

示例

示例一：无边框嵌入外部网站

<div style="overflow:hidden">
    <iframe src="https://www.example.com" style="position:absolute;width:100%;height:100%;left:0;top:0;border:none;margin:0;padding:0;overflow:hidden;"></iframe>
</div>

在这个例子中，我们使用CSS样式设置iframe宽度和高度为100%，同时使用了overflow:hidden属性保证页面不会发生滚动条显示。给div设置了overflow:hidden属性，保证了iframe无边框的显示效果。

示例二：自适应高度的iframe

<iframe src="https://www.example.com" scrolling="no" onload="resizeIframe(this)"></iframe>

<script>
    function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    }
</script>

在这个例子中，我们使用了一个JavaScript函数来自适应iframe的高度，使用了onload属性来在页面加载完成后执行该函数。当外部网站内容高度发生变化时，JS函数会动态改变iframe的高度，以保证完整显示内容。