文档章节

解决iframe自适应高度问题

旺仔没馒头
 旺仔没馒头
发布于 2017/09/05 19:41
字数 189
阅读 8
收藏 0
点赞 0
评论 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
博文 15
码字总数 10924
作品 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高度自适应(兼容IE/Firefox、同域/跨域)

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

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

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

长平狐
2013/01/06
91
0
easyui tab 加载iframe 高度问题

其实按网上搜的结果, 有个属性是. 加上他之后会使得自适应父类的宽高。 加上之后,发现个问题,当刷新tab内容的时候高度是对的,但是新建tab的时候高度还是没自适应。下面解决办法是,新建之...

渺小的尘埃
2015/05/06
0
1
iframe自适应高度,多层嵌套iframe自适应高度的解决方法

在页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点。想比之下,iframe就简单多了!处理iframe的自适应宽、高,会经常用到,网上整理了一份,写在这里备用: 单个iframe 高度...

SkipperD
2014/03/10
0
0
这种复杂的iframe自适应如何做

♣ 先说前提: 在响应式下要求引用站外的iframe自适应其父窗口的大小。 引用的站外iframe的宽度和高度是一固定值。 ♣ 探讨: 先拿一个实物来说事吧! 比如下面这个iframe 其宽和高分别是640...

ziluopao
2016/10/31
281
4
Easy-UI中datagrid宽高自适应问题

在使用easy-ui的过程中,新增tab中利用iframe显示时,发现里面的datagrid高度不能自适应,下面是解决办法,写下备用: 再iframe中使用easyui-layout布局,然后把datagrid放到center就可以了,...

独-奏
2013/02/16
0
1
iframe高度自适应的问题

问题:iframe如何自适应高度? 问题描述:iframe随加载页面的高度变化,加载的页面高度不是固定的,页面也不是固定的。如何实现,百度了很多方法都不行,被逼无奈求助各位了。 代码: functi...

认真做事开心做人
2016/11/21
341
4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux 技巧:让进程在后台可靠运行的几种方法

我们经常会碰到这样的问题,用 telnet/ssh 登录了远程的 Linux 服务器,运行了一些耗时较长的任务, 结果却由于网络的不稳定导致任务中途失败。如何让命令提交后不受本地关闭终端窗口/网络断...

mskk
6分钟前
0
0
手把手教你利用Nextcloud搭建个人网盘/私有云盘

越来越多的云盘宣布关闭,百度网盘也时不时8秒和谐视频,分享也会提示侵权被和谐。为了解决这些问题,我们可以搭建一个自己的个人网盘(私有云盘),常用的开源框架包括ownCloud,Seafile,N...

flyzy2005
10分钟前
0
0
Confluence 6 配置时间和日期格式

你可以修改你 Confluence 为用户显示的时期和时间格式。设置的句法使用的是 SimpleDateFormat class,请参考 Java SimpleDateFormat 文档中的内容来设置日期和时间格式。 有下面 3 个时间和日...

honeymose
13分钟前
0
0
php seralize unserialize

关于PHP 序列化(serialize)和反序列化(unserialize)出现错误(Error at offset)的解决办法。 首先我们分析一下为什么会出现这个错误: 编码问题 UTF-8: ANSI: 我发现在我的机器上边编码改...

yeahlife
20分钟前
0
0
七、JSP九大内置对象和四个作用域

九大内置对象: request:类型是HttpServletRequest,和Servlet里的HttpServletRequest一模一样。 response:类型是HttpServletResponse,和Servlet里的HttpServletResponse一模一样。JSP里基...

Wakeeee_
23分钟前
0
0
第十四章NFS服务搭建与配置

14.1 NFS介绍 NFS介绍 NFS是Network File System的缩写;这个文件系统是基于网路层面,通过网络层面实现数据同步 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netap...

Linux学习笔记
55分钟前
0
0
双向认证-nginx

1、设置容器 docker run -it --name nginx-test2 -v /home/nginx:/apps -v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf:ro -p 8183:80 -p 7443:443 -d nginx:stable 2、修改nginx配......

hotsmile
56分钟前
0
0
深入了解 Java 自动内存管理机制及性能优化

一图带你看完本文 一、运行时数据区域 首先来看看Java虚拟机所管理的内存包括哪些区域,就像我们要了解一个房子,我们得先知道这个房子大体构造。根据《Java虚拟机规范(Java SE 7 版)》的规...

Java大蜗牛
57分钟前
4
0
SpringBoot | 第六章:常用注解介绍及简单使用

前言 之前几个章节,大部分都是算介绍springboot的一些外围配置,比如日志 配置等。这章节开始,开始总结一些关于springboot的综合开发的知识点。由于SpringBoot本身是基于Spring和SpringMvc...

oKong
58分钟前
12
0
云数据库架构演进与实践

如今,大型企业如金融企业和银行等,在下一代的微服务架构转型要求下,需要基础软件和数据平台能够实现原生的云化,以满足微服务架构的需求。 微服务,也就是一种面向服务的,有特定边界的松...

巨杉数据库
59分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部