文档章节

解决iframe自适应高度问题

旺仔没馒头
 旺仔没馒头
发布于 2017/09/05 19:41
字数 189
阅读 21
收藏 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);

© 著作权归作者所有

共有 人打赏支持
旺仔没馒头
粉丝 4
博文 21
码字总数 17060
作品 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
131
1
Iframe高度自适应(兼容IE/Firefox、同域/跨域)

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

thinkgood
2013/10/14
0
0
再谈iframe自适应高度

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

长平狐
2013/01/06
113
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周三乱弹 —— 风扇写着先生请自爱

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @蚂蚁哈哈哈 :分享陈奕迅的单曲《落花流水》 《落花流水》- 陈奕迅 手机党少年们想听歌,请使劲儿戳(这里) @车谷 :我发现每天上班都好困 ...

小小编辑
45分钟前
6
0
centos7重置密码、单用户模式、救援模式、ls命令、chmod命令

在工作当中如果我们错误的配置了文件使服务器不能正常启动或者忘记密码不能登录系统,如何解决这些问题呢?重装系统是可以实现的,但是往往不能轻易重装系统的,下面用忘记密码作为例子讲解如...

李超小牛子
今天
3
0
Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

当使用桌面应用程序的时候,有没有那么一瞬间,想学习一下桌面应用程序开发?行业内专业的桌面应用程序开发一般是C++,C#来做,Java开发的也有,但是比较少。本节课会介绍Python的GUI(图形用...

程序员补给栈
今天
8
0
kafka在的使用

一、基本概念 介绍 Kafka是一个分布式的、可分区的、可复制的消息系统。它提供了普通消息系统的功能,但具有自己独特的设计。 这个独特的设计是什么样的呢? 首先让我们看几个基本的消息系统...

狼王黄师傅
今天
3
0
Android JNI总结

0x01 JNI介绍 JNI是Java Native Interface的缩写,JNI不是Android专有的东西,它是从Java继承而来,但是在Android中,JNI的作用和重要性大大增强。 JNI在Android中起着连接Java和C/C++层的作...

天王盖地虎626
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部