CSS完美解决iframe高度自适应问题

最新推荐文章于 2023-06-02 16:02:10 发布
最新推荐文章于 2023-06-02 16:02:10 发布
阅读量937 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48192059/article/details/107954801
版权

CSS完美解决iframe高度自适应问题

最近在做微信公众号网页版的项目，其中使用到了iframe嵌套外部网页，iframe功能很强大，但特别烦人的一点是，它的高度不能自适应，在网上找了很多的方法，都是不行，后面终于找到一个自适应高度的方法
第一步 设置body的CSS样式 overflow:hidden(必须）
第二步 设置iframe 的样式 onscroll = “yes”
设置了这两个之后，问题就圆满解决了，折腾了老半天的时间，终于是弄好了，也算是对得起这点时间叭

章木木
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何实现iframe(嵌入式帧)的自适应高度
12-11
好几次看到有人提问问到如何实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象，刚好我在工作中也碰到了类似问题，于是上网翻查，东抄抄西看看，弄出来这么一个函数，贴到页面里面就能用了。不敢独享，大家要是觉得有用，欢迎使用 源代码如下 代码如下:[removed]  //** iframe自动适应页面 **//  //输入你希望根据页面高度自动调整高度的iframe的名称的列表  //用逗号把每个iframe的ID分隔. 例如: [“myframe1”, “myframe2”]，可以只有一个窗体
完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
nebear的博客
07-21 1万+
Iframe的强大功能偶就不多说了，它不但被开发人员经常运用，而且黑客们也常常使用它，总之用过的人知道它的强大之处，但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应，这一点让很多人都头疼万分。百度或是谷歌一下，确实很多解决方法，但尝试一下，会发现问题很多：浏览器兼容性差，不能自适应，仅支持同域Iframe等诸多问题，尤其是跨域Iframe高度自适应问题。网上根本找不到一种可行
iframe自适应宽高
11-08
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域认证。 提供了一系列的页面大小的计算方法来支持复杂的CSS布局。 检测修改DOM可以使网页大小使用MutationObserver。 发现可以导致页面大小调整事件（窗口大小调整，CSS动画和过渡，改变方向和鼠标事件）。 简化通讯和主机之间通过PostMessage iframe的网页。 在iframe页面链接修复和支持iFrame与父页面之间的链接。 提供自定义的大小和滚动方法。 使家长地位和视口大小的iframe。 与ViewerJS支持PDF和ODF文档。 后备支持到IE8。
如何设置iframe高度自适应在跨域情况下的可用方法
01-19
在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法。在父页面中给定一个不带滚动条的iframe，然后对属性src指定一个可加载的页面，这样当父页面被访问的时候，子页面可以被自动加载。iframe的高度需要根据子页面的实际高度来进行调整。如果iframe的高度小于子页面的实际高度，超出的部分无法显示；相反，如果iframe的高度过高，则页面上会出现大量的空白区域。我们可以通过属性或者CSS来设置iframe的高度，当不确定子页面内容的高度时，也可以通过脚本来进行动态指定。但是如果子页面不在同一域中怎么办？这时候脚本没有办法获取到子页面的高度，存在JavaScript跨域的问题！
css--自适应，高度塌陷解决，伪元素，iframe，双倍间距重叠问题，clac():计算函数，bfc
liItong的博客
04-02 151
css--自适应，高度塌陷解决，伪元素，iframe，双倍间距重叠问题，clac():计算函数，bfc
DIV CSS iframe 实现的主页布局
09-22
通过Div+CSS 结合Jquery制作的具有左侧菜单、导航菜单、下拉菜单、自动适应窗口大小、自动控制iframe高度，动态修改CSS样式，利用CSS的expression表达式，自动调整div大小，实现div左侧跟随的诸多布局应用。
6种iframe高度自适应的方法
热门推荐
web前端开发
03-12 2万+
js自适应高度，实际上就是设置iframe的高度，设置等于内嵌网页的高度，从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度，同样可以...
iframe自适应高度
zhu_menglu的博客
04-12 4294
其中，padding-bottom的值需要根据iframe的宽高比来计算，例如，如果iframe的宽高比为16:9，则padding-bottom的值为56.25%（9除以16乘以100%）。可以设置iframe标签的高度为0，然后使用padding-bottom属性来设置iframe标签的高度，使其按照原来的比例自适应。这样，当浏览器窗口大小改变时，iframe标签的高度会自动按照原来的比例进行调整，从而实现自适应效果。
使用自适应高度和加载效果优化网站iFrame
weixin_48723799的博客
04-20 247
在许多网站中，我们经常需要使用iframe来嵌入其他网站的内容，但是iframe的高度通常是固定的，如果嵌入的网页内容高度超过了iframe的高度，那么就会出现滚动条，影响用户体验。此外，当iframe加载较慢时，用户可能会感到不耐烦。因此，在这篇文章中，我们将介绍如何为iframe添加加载效果以及自适应高度的功能，提高用户体验。
iframe 自适应
抓饭不吃皮牙子
10-09 2072
function reinitIframe(){ var iframe = document.getElementById("iframepage"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.
iframe-resizer-react:Iframe-Resizer的官方React界面
04-27
它提供了一系列功能来解决使用iFrame时最常见的问题，其中包括： 将iFrame的高度和宽度调整为内容大小。 适用于多个和嵌套的iFrame。 跨域iFrame的域身份验证。 提供多种页面大小计算方法，以支持复杂CSS布局。 ...
后台管理自适应布局
09-30
只需要一行代码即可实现头部 、中间部分(左边固定，右边自适应)、底部，包含根据json 自动加载菜单。布局大小根据可见宽高自动变化，可自己更改样式，灵活多变。可搜索菜单，并打开菜单。功能非常多，全是源码，内容...
css自适应高度js,CSS/JAVASCRIPT之Iframe高度自适应
weixin_39560245的博客
08-04 249
使用iframe除了通信以外最大的问题应该就是其高度和宽度的问题了，默认状态下，iframe的宽度为300px，高度为150px，当给iframe增加“width=’100%’ height=’100%’”属性而父元素的属性均为默认是，iframe宽度会扩展至与父元素宽度一致，而高度仍然是150px，因此接下来我们主要讨论iframe的高度以及其滚动条的问题。为了讨论方便，下面我们默认body元素...
html iframe 自适应高度宽度,给iframe设置尺寸自适应为什么高度那么怪？？
weixin_39829307的博客
06-25 177
$(document).ready(function(){$("#aaa").load(function(){//$(this).width(0); //用于每次刷新时控制IFRAME宽度初始化// $(this).height(0); //用于每次刷新时控制IFRAME高度初始化var width = $(this).contents().find("#con").width() ;var he...
iOS 中 微信等app h5 页面 iframe 调用高度自扩展问题及解决
dx_shendu的博客
06-02 422
但是这种方法会导致 iframe 中的 content 显示不全，超出 iframe 高度的部分会直接被裁剪掉。第二种：用一个 div 包裹 iframe，并在 div 中处理滚动事件。第一种：直接将 iframe 设置成 scrolling no。
iframe嵌入网页时，页面大小怎么自适应
五花漏的博客
02-24 2万+
问题描述： 页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果： 可以看到嵌入的页面只露出了一部分。 而我们希望：嵌入的页面能够完全展示在容器中。 思路：利用CSS的 transform，进行页面缩放。 1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高。 2、iframe 的父元素 div 的宽高是屏幕宽高的50%，所以 transform: scale(0.5)这个数值是0.5。（其余的三个属性没啥可说的，不明白的搜一下W3C吧
关于iframe或document监听滑动(scroll)失败的问题
子燕若水的博客
12-04 2708
出现了这个问题我们总是把时间花在分析为什么iframe这个element不能滑动?该怎么设置? 其实iframe监听滑动如果出了问题,首先该分析的是里面的document到底能不能滑动. -------------------------------------------------------------------------------------------------------------------------- iframe监听滑动本身其实很简单,只需要iframe的contentW
小程序中使用web-view链接H5网页
m0_48192059的博客
10-22 3980
##加粗样式小程序中使用web-view链接H5网页 1、小程序中，封装统一的接口请求方法（以便在每个接口中都携带 cookie，放在 header 中）； const request = parameter => { //url必填项 if (!parameter || parameter == {} || !parameter.url) { console.log('Data request can not be executed without URL.');
iframe高度自适应
最新发布
07-11
为了实现iframe的高度自适应，你可以使用以下方法： 1. 使用JavaScript动态调整iframe的高度。在父页面中，通过JavaScript获取iframe的内容高度，然后将这个高度应用到iframe的style属性中，以实现自适应效果。具体的代码如下： ```javascript <script> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px'; } </script> <iframe src="your_page_url" onload="resizeIframe(this)"></iframe> ``` 在上述代码中，我们定义了一个名为`resizeIframe`的JavaScript函数，该函数将iframe的内容高度作为参数传入，并将其应用到iframe的style.height属性中。通过将该函数绑定到iframe的`onload`事件，当iframe加载完成时，会自动调用该函数进行高度调整。 2. 使用CSS样式表中的`height: 100%`属性。将iframe的高度设置为100%，使其根据父容器的高度进行自适应。具体的代码如下： ```html <style> iframe { height: 100%; } </style> <iframe src="your_page_url"></iframe> ``` 通过将iframe的CSS样式设置为`height: 100%`，它将根据父容器的高度进行自适应。 以上是两种常见的实现iframe高度自适应的方法，你可以根据具体的需求选择其中一种来使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值