iframe自适应高度

最新推荐文章于 2022-06-15 16:40:16 发布
转载 最新推荐文章于 2022-06-15 16:40:16 发布 · 1.6k 阅读 · 0
标签
#iframe #javascript #null #border #function
#table
本文介绍了一种使用JavaScript实现iframe自适应高度的方法。通过检测iframe内部文档的实际高度并动态调整iframe的高度，确保iframe始终能够精确适配其内容高度，避免多余滚动条出现的同时也优化了页面布局。

 <script type="text/javascript" language="javascript">

                  function iFrameHeight() {

                      var ifm = document.getElementById("iframepage");

                      var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;

                      if (ifm != null && subWeb != null) {

                          ifm.height = subWeb.body.scrollHeight;

                          document.getElementById("tdpl").height = subWeb.body.scrollHeight;

                      }

                  }   

</script>

               <table width="98%" border="0"align="center"  cellpadding="0" cellspacing="0">

                    <tr>

                        <td id=tdpl>

                         <iframe src=artpl.aspx?artid=<%=info.ID %> width=100% id="iframepage" onLoad="iFrameHeight()"  frameborder=no scrolling=auto></iframe>

                        </td>

                        </tr>

                        </table>

iframe自适应高度和宽度
12-08
iframe自适应高度和宽度
iframe自动适应高度
yvhitxcel的专栏
10-18 885
主页面：         &lt;iframe id="z" name="z" src="dj/_tbl.php?b=user_files" scrolling="no" frameborder="0" style="width:100%;"  onload="setIframeHeight()"  &gt;&lt;/iframe&gt
Iframe高度自适应
kopolwu的专栏
01-05 341
<br /><br />在实际的项目进行中，很多地方可能由于历史原因不得不去使用iframe，包括目前正火热的应用开发也是如此。<br />随之而来的就是在实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便。于是自动调整iframe的高度就成为本文的重点。<br />采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引发出同域、跨域两种情
iframe高度自适应
qq_41623154的博客
10-10 477
如上图，根据我文章的展示数量，iframe的高度自适应。网上看了很多博客，基本拿来不能用，可能是每个人在使用的具体情况不一样，所以本文我会具体讲述下我是怎么用iframe的，html及js我都会详细贴上来。 主页面的html代码： <!--右边栏--> <div class="col-md-8 cb " style="margin-left: 10px...
iframe自适应高度解决方案
溺水的鱼 - Later equals never.
06-01 1105
经常会有父页面需要通过iframe嵌入另一个子页面,又要适时 根据子页面的高度调整父页面中iframe的高度，这就要求 页面必须具有自适应功能。自适应思想比较简单：就是父页面中iframe高度必须要适时根据子页面 高度进行调整。 由于涉及到js操作，因此对于不同域名的自适应解决方案有所不同，主要是在解决跨域问题。  ·   对于同父级域名下的自适应高度：jipiao.taobao.com/ind
6种iframe高度自适应的方法
热门推荐
web前端开发
03-12 3万+
js自适应高度，实际上就是设置iframe的高度，设置等于内嵌网页的高度，从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度，同样可以...
iframe的高度自适应
xiaozhuangyumaotao的博客
04-17 6678
现在有这样一个情景：a页面需用使用iframe嵌入b页面，而b页面的内容高度是不固定的，有可能是300px,有可能是500px......，这时候我要求在a页面嵌入b页面的区域不能有垂直滚动条，怎么实现呢？很显然，因为被嵌入的b页面高度是不确定的，我们在使用iframe的时候就不能固定iframe这个元素的高度，而是应该写为100%。好，下面我还是用最简单的例子来验证如何完美的解决iframe高度...
iframe高度自适应方案总结
zmjのblog
10-27 1万+
1. 背景 iframe能将一个网页嵌入到另一个网页中，有个缺陷是高度不能随内容而撑开，需要手动设置。 如果内容高度是动态的，就会存在问题。 在网上查了不少方案都存在一些问题，总结了一下 2. 思路 整体而言思路是：通过scrollHeight获取iframe的滚动高度，动态将iframe.height设置为scrollHeight即可 但是要考虑到两个问题 如果内容是动态改变的，就不能仅仅在window.onload后做一次高度改变 要考虑撑开后又高度又缩小的情况 3. 代码 为了解决上述的两个问题，
Iframe自适应高度，Iframe高度问题解决
蕃薯耀的博客
03-10 4939
Iframe自适应高度，Iframe高度问题解决 ================================ ©Copyright 蕃薯耀2021-03-10 https://www.cnblogs.com/fanshuyao/ 一、Iframe自适应高度方法 /** * 父级页面获取子级页面的高度 给元素设置高度 * 在onload事件之后才生效，即第一次加载才生效，后面高度变化...
iframe 自动适应高度
Wayne_C的Blog
06-25 626
<br /> 以下是iframe 实现自适应高度的DEMO //////////////iframeResize.js内容///////////////// function iframeAutoFit() { 　　try{ 　　　　if(window!=parent){ 　　　　　　var a = parent.document.getElementsByTagName("IFRAME"); 　　　　　　for(var i=0; i<a.length; i++) { 　　　　　
layui 动态表格 合并单元格
zheyijieyou的博客
08-31 2468
效果图 代码放置位置 done : function(res, curr, count) { merge(res); } function merge(res) { var data = res.data; var mergeIndex = 0;//定位需要添加合并属性的行数 var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数 var columsName
iframe 自适应高度
jhrokin的专栏
03-24 402
iframe自适应高度第二个页面会自动调整子页的大小，实现代码如下所示：iframe自适应网页//自动调整iframe框架的方法function iframeAuto(){try{if(window!=parent){//定位需要调整的frame框架（在父级窗口中查找）var a = parent.document
iframe 自适应
牛肉胡辣汤
10-09 5792
function reinitIframe(){ var iframe = document.getElementById("iframepage"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.
iframe自适应高度（随内容高度变化）
weixin_50641294的博客
05-25 6622
由于需求需要把一个项目的页面嵌套到另外一个页面，但是iframe高度不能写死，所以要让iframe高度自适应 1.解决思路： 获取嵌套页面的高度，把高度赋值给父页面的iframe 代码实现 1.首先在嵌套页面获取父级ifram元素 let iframeDom = parent.parent.document.getElementById("iframe") 2.获取嵌套页面高度 let box = document.getElementById("box") 3.把页面高度复制给父级ifram iframe
iframe 高度自适应的方法
我的专栏
06-15 1723
页面中使用iframe嵌套其他页面，如果出现滚动条，确实不好看，如果想不滚动就得让 iframe 高度自适应。 以下代码可以实现获取嵌套body的高度： 或者可以使用scrollHeight属性获取指定区域的高度、宽度 scrollHeight 属性是一个只读属性，它返回该元素的像素高度，高度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数，单位是像素 px。...
获取Iframe的高度
Dai_bhid的博客
07-30 3222
应用场景：由于使用了jquery.smartwizard组件来做一个分步操作向导功能页面，整个步骤内容无法设置高度为100%或auto，会有步骤内容错乱，暂未知原因，只能设置固定值，但是会有一个问题，用户的PC的电脑屏幕大小和分辨率有可能是不一样的，如果我们定死了高度，则在不同大小的屏幕网页显示不会自适应高度，始终保持固定高度，显示不友好。 解决方案：获取iframe高度的同时减去其他内容高度占比，然后赋值给步骤内容高度即可，设置当网页大小发生变化同步刷新高度设置。 代码：（网页变化同步刷新高度设置+获
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值