文档章节

IFrame 根据嵌入页面自动调节大小

JesusSlim
 JesusSlim
发布于 2015/05/15 22:28
字数 254
阅读 45
收藏 0

很多人估计会遇到这样的情况,在IFrame嵌入某些页面,总会出现滚动条,那么有没方法,可以让IFrame随着嵌入页面的内容大小自动调节大小而不出现滚动条呢?答案是肯定的,经过查找,本人发现用IframeResizer脚本可以很好解决此问题,并且它是跨域名的,即使嵌入的是第三方页面,不需繁杂处理,几个步骤就可以使它自动调节宽度和高度。

 

1。首先下载iframe-resizer最新版本,现在是v2.5.2, 地址:

https://github.com/davidjbradshaw/iframe-resizer/zipball/master

2。在放Iframe的页面,引入iframeResizer.min.js脚本,并且进入如下初始化。

<iframe src="http://anotherdomain.com/frame.content.html" width="100%" scrolling="no"></iframe>

4。在被嵌入的页面,添加如下脚本.
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/iframeResizer.contentWindow.min.js" type="text/javascript"></script>

5.为兼容IE8+,还要添加如下。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 

实例:

http://davidjbradshaw.com/iframe-resizer/example/

© 著作权归作者所有

上一篇: myeclipse10破解
下一篇: html元素倾斜
JesusSlim
粉丝 0
博文 74
码字总数 10136
作品 0
杭州
程序员
私信 提问
jQuery的弹窗插件--wBox

wBox轻量级的弹出窗口jQuery插件,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如callback函数,显示隐藏层,Ajax页面,iframe嵌入页面等功能 WBox功能特点 1....

三水清
2010/12/02
11.4K
0
iframe去边框,无边框,使用大全

<iframe src=”you page’s url” width=”100″ height=”30″ frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes”></if......

liaolzy2
2014/09/24
0
0
如何实现iframe(嵌入式帧)的自适应高度

好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看...

晨曦之光
2012/03/09
99
0
HTML iframe 用法小总结

Iframe用法,下面是一个常规的列子 <iframe border=2 frameborder=0 width=500 height=500 marginheight=0 marginwidth=0 scrolling=no src="move-ad.html"></iframe> 其中: iframe用于设置文......

Mr韦淋
2014/11/17
0
0
UEditor在iframe中显示有问题

UEditor在iframe中显示有问题 如果在iframe中嵌入的页面带有ue文本编辑器,iframe必须设置固定值的大小如下 style="height: 50px;width: 50px;",才能显示 不设置或者用百分比设置都不显示...

olive
2015/09/07
2.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

centos7 新手阿里云服务器安装mongodb

简介 MongoDB 是一个基于分布式 文件存储的NoSQL数据库 由C++语言编写,运行稳定,性能高 旨在为 WEB 应用提供可扩展的高性能数据存储解决方案 MongoDB特点 模式自由 :可以把不同结构的文档存...

醉雨
25分钟前
1
0
sql注入漏洞,应屏蔽SQL注入攻击

注:SQL注入好比是前端URL传参数请求时参数以SQL 做为参数传入,如 select 1 from dual where 1=1 or 1=1 and 1=2;(类似这样的SQL语句) 防御方法 如果自己编写防注代码,一般是先定义一个函...

颜丽
25分钟前
2
0
装饰者模式

 代理模式与装饰者模式看起来很像,都实现基础对象实现的接口,在其自身对象中都保存着对被代理/被装饰者的对象引用。   先来看看装饰者模式的定义:动态的将责任附加到被装饰者对象上,用...

铁骨铮铮
29分钟前
0
0
我为什么飞行 10000 公里去西班牙参加 KubeCon?

2019 年 5 月 20 日至 23 日, 由 Cloud Native Computing Foundation (CNCF) 主办的云原生技术大会 KubeCon + CloudNativeCon EU(欧洲场)即将在热情洋溢的巴塞罗那盛装启幕。 作为云计算领...

zhaowei121
47分钟前
1
0
Node.getTextContent() not found 解决办法【不需要调整builder path下面包顺序】

新导入的工程,w3c的getTextContent找不到,response的setCharacterEncoding找不到,网上很多教程都是“调整工程builder path的lib包顺序把jre、tomcat调到上面即可”,但是进入项目的build...

嘿嘿嘿IT
54分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部