文档章节

解决iframe自适应高度问题

旺仔没馒头
 旺仔没馒头
发布于 2017/09/05 19:41
字数 189
阅读 11
收藏 0

        在页面中,经常使用iframe来展示某一块的区域內容,但是为了消除iframe的滚动条,让嵌入iframe的页面看起来更加自然,需要iframe自动适应內容高度,经过我的实验,发现下面代码能够很好的解决问题。

iframe代码

<iframe frameborder="0" width="100%"src="${ctx}/business/standard/list" scrolling="no"
id="myframe" ></iframe>

以下是调整大小的核心代码,在window.onload方法中调用即可。

function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
    }
}

        假如我们iframe的高度要随着子页面的內容变化而变化,那么需要设置一个定时器,来不停地去改变iframe的高度。

window.setInterval("setIframeHeight(document.getElementById('myframe'))", 200);

© 著作权归作者所有

共有 人打赏支持
旺仔没馒头
粉丝 2
博文 18
码字总数 13798
作品 0
济南
程序员
私信 提问
iframe自适应高度的多种方法方法小结

第一种方法:代码简单,兼容性还可以,大家可以先测试下。 function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocume......

华山猛男
2014/03/27
0
0
解决iframe显示高度自适应问题

1.解决iframe显示高度自适应问题 2.解决在chrome下ifame跳转高度不能减少 3.解决IE Chrome兼容问题(其它浏览器未测试) HTML: <iframe frameborder="0" scrolling="no" id="iframe" onload=...

happy爱宝贝
2013/02/26
0
0
iframe 自适应高度问题

最近项目中有应用到IFRAME,但是由于我的多个应用同时套用一个iframe 所以需要用到iframe 自适应高度问题. 在网上找了一些资料都必需要在引入都必须要设页面的高度,如果不设的话返回的高度跟...

Mr_XK
2014/08/15
123
1
再谈iframe自适应高度

通过Google搜索iframe 自适应高度,结果5W多条,搜索iframe 高度自适应,结果2W多条。 我翻了前面的几十条,刨去大量的转载,有那么三五篇是原创的。而这几篇原创里面,基本上只谈到如何自适...

长平狐
2013/01/06
91
0
Iframe高度自适应(兼容IE/Firefox、同域/跨域)

看转贴吧 但是需要说明的是,就是大家不要以为可以用这种方法来控制别人的网页,不行的 这个跨域虽说域名不一样,但必须都是你的,也就是你可以修改的才行,这个跨域这种方法可以实现,但是如...

thinkgood
2013/10/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 哥们之间报恩的想法被上帝实现了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 小小编辑:推荐歌曲《消愁》 《消愁》- 毛不易 手机党少年们想听歌,请使劲儿戳(这里) @过遥 :周一的早上就应该用来补觉,太困了 周末不想...

小小编辑
45分钟前
110
7
MariaDB 服务器在 MySQL Workbench 备份数据的时候出错如何解决

服务器是运行在 MariaDB 10.2 上面的,在使用 MySQL Workbench 出现错误: mysqldump: Couldn't execute 'SELECT COLUMN_NAME, JSON_EXTRACT(HISTOGRAM, '$."number-of-buckets-specified"'......

honeymose
今天
3
0
apache顶级项目(二) - B~C

apache顶级项目(二) - B~C https://www.apache.org/ Bahir Apache Bahir provides extensions to multiple distributed analytic platforms, extending their reach with a diversity of s......

晨猫
今天
7
0
day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
今天
22
1
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部