楚狂人建站常用的iframe调用代码对于PC端来说难度不大，一般都可以轻松实现引入第三方页面，但是很多情况下大家会发现高兴早了，因为iframe调用页面到了手机端会错位，显示的还是PC端的格式，这样造成内容显示不全。怎么办？今天就给大家分享iframe自适应手机端+电脑端的方法。
一、iframe自适应页面
当我们在一个网页中嵌入另一个网页时，我们可以使用iframe标签。一般来说，iframe会显示一个特定的固定大小的区域。但是，如果我们希望iframe自适应页面大小，我们可以使用下面的代码：
<iframe src="https://example.com" frameborder="0" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%;"></iframe>
这段代码中，我们使用了CSS属性position和top、left、bottom、right等来设置iframe的位置和大小，使其填满整个页面。这样，当浏览器窗口大小改变时，iframe也会自适应。
二、iframe自适应手机电脑
我们常常需要在不同的设备上展示网页，如桌面电脑、笔记本电脑、智能手机等。为了让iframe在不同设备上自适应，我们可以使用媒体查询。
首先，在head标签中添加标签：
<meta name="viewport" content="width=device-width, initial-scale=1">
这个meta标签指定了视口的大小为设备的宽度，并且将初始缩放比例设置为1。
然后，在CSS文件中添加媒体查询：
@media (max-width: 768px) {
iframe {
width: 100%;
height: 300px;
}
}
@media (min-width: 769px) {
iframe {
width: 600px;
height: 500px;
}
}
这段代码通过媒体查询分别为不同设备设置不同的iframe大小。其中，max-width: 768px是指当屏幕宽度小于等于768像素时，设置iframe宽度为100%，高度为300像素；而min-width: 769px是指当屏幕宽度大于等于769像素时，设置iframe宽度为600像素，高度为500像素。开发者可以根据不同设备的情况灵活调整。
三、iframe自适应高度
有时候iframe的高度可能不确定，例如嵌入的页面中有可变高度的元素。要使iframe高度自适应，我们可以使用js来获取iframe内容的高度，然后设置iframe的高度为内容的高度。
首先，在iframe的src文档中添加以下代码：
<script>
function resizeIframe() {
var iframe = document.getElementById('myIframe');
if(iframe) {
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
}
</script>
这段代码会获取iframe的ID为myIframe，并通过iframe.contentWindow.document获取iframe的内容文档，然后获取文档的body元素的scrollHeight属性，设置iframe的高度为文档的高度。
然后，在iframe中添加onload事件来调用resizeIframe函数：
<iframe id="myIframe" src="https://example.com" onload="resizeIframe()"></iframe>
这段代码会在iframe加载完成时调用resizeIframe函数，从而设置iframe的高度为内容的高度。
四、iframe自适应窗口大小
有时候我们希望iframe大小能够根据窗口大小自适应。我们可以使用resize事件来监听窗口大小的变化，并在变化时更新iframe的大小。
首先，在iframe中添加以下代码：
<iframe id="myIframe" src="https://example.com"></iframe>
然后，在父页面中添加以下代码：
<script>
window.addEventListener('resize', function() {
var iframe = document.getElementById('myIframe');
if (iframe) {
iframe.style.width = '100%';
iframe.style.height = (window.innerHeight - iframe.offsetTop) + 'px';
}
});
</script>
这段代码会在窗口大小改变时调用匿名函数，从而更新iframe的大小。其中，iframe.offsetTop是指iframe距离文档顶部的距离，window.innerHeight是指窗口的内部高度。
五、iframe自适应div
有时候我们需要将iframe放置在一个div中，并让iframe自适应div的大小。我们可以使用绝对定位来实现这一点。
首先，在HTML中添加一个包含iframe的div：
<div id="myDiv" style="position: relative; width:100%; height:300px;"> <iframe src="https://example.com" style="position: absolute; top:0; left:0; bottom:0; right:0;width:100%; height:100%;"></iframe> </div>
这段代码中，我们设置了div的宽度为100%，并且将position设置为relative，这样，我们就可以在div中使用绝对定位了。然后，在iframe中将position设置为absolute，使其相对于父div定位。我们也可以控制iframe的位置和大小，使其填充整个div。
最后，我们可以使用与步骤三类似的方法实现iframe自适应div高度的效果。
六、iframe自适应宽度
在步骤五中，我们展示了如何让iframe自适应div的宽度。如果我们只想让iframe自适应其宽度，而不是适应div的宽度，我们可以使用下面的代码：
<iframe src="https://example.com" frameborder="0" style="position:absolute; top:0; left:0; width:100%;"></iframe>
这段代码中，我们使用CSS属性position和top、left等来控制iframe的位置，使其占据整个父元素的宽度。这样，当浏览器窗口大小改变时，iframe也会自动调整其宽度。
七、iframe自适应页面高度
在步骤一中，我们已经展示了如何让iframe自适应整个页面大小。如果我们只想让iframe自适应页面的高度，我们可以使用下面的代码：
<iframe src="https://example.com" frameborder="0" style="position:fixed; top:0; left:0; right:0; width:100%;" scrolling="no"></iframe>
这段代码中，我们使用CSS属性position和top、left等来控制iframe的位置，使其占据整个页面的宽度，并将right属性设置为0，使其铺满页面。我们还将scrolling属性设置为no，以禁用iframe的滚动条。这样，当页面高度改变时，iframe也会自动调整其高度。
八、css设置iframe高度自适应
在步骤三中，我们展示了如何使用js让iframe高度自适应。如果我们只想使用CSS实现相同的效果，我们可以使用下面的代码：
iframe {
height: calc(100vh - 50px);
}
这段代码使用CSS3属性calc计算iframe的高度。其中，100vh表示窗口的总高度，50px是预设的顶部和底部的空白高度。这样，当窗口大小发生变化时，iframe也会自适应。需要注意的是，这种方法只适用于高度固定的顶部和底部，否则需要使用js来动态计算高度。
iframe自适应方法搭配
在使用iframe时，应该根据需求选择适当的自适应方法。如果我们只是想让iframe自适应整个页面或自适应设备大小，可以使用步骤一和步骤二中的方法。如果我们需要让iframe自适应父元素或设定固定高度，可以使用步骤五、六和九中的方法。如果我们需要动态计算iframe高度，可以使用步骤三中的方法，总之，应该根据具体情况选择最合适的方法。
原文地址：https://www.python100.com/html/77700.html
iframe缺点
虽然iframe有很多优点，但是也存在一些缺点。首先，搜索引擎很难对iframe中的内容进行索引，因为iframe被视为单独的文档。其次，如果嵌入的页面中存在恶意代码，可能会对父页面造成安全威胁。此外，iframe的性能也有所下降，因为其会增加页面的加载时间和渲染时间。
通过以上八种方法，大家就可以轻松实现iframe自适应手机端和电脑端页面以及窗口大小，如果你想在调用网页时隐藏导航栏和底部内容，可以参考本站前面分享内容：
发布时间： 阅读(248)
