javascript原生和jquery库实现iframe自适应高度和宽度


Posted in Javascript onJuly 18, 2014

javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码!

‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

基于Jquery库的代码很好实现:

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
$("#mainframe").load(function(){ 
$(this).height(0); //用于每次刷新时控制IFRAME高度初始化 
var height = $(this).contents().height() + 10; 
$(this).height( height < 500 ? 500 : height ); 
}); 
}); 
</script>

‍基于JS原生代码的实现:

<script language="javascript"> 
if (window.parent.length>0){window.parent.document.all.mainframe.style.height=document.body.scrollHeight;} 
</script>

只需在你被iframe调用的文件</body>之后加入上面这段即可!
这个也可以控制iframe的高度随内容的多而自动增长

<iframe name="web" width="100%" frameborder=0 height="100%" src="index.php" id="web" onload="this.height=web.document.body.scrollHeight+20" ></iframe>

jquery库实现iframe自适应内容高度和宽度

Javascript 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
Javascript 面向对象 重载
May 13 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 #Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 #Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 #Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 #Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 #Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 #Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 #Javascript
You might like
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
angularjs实现table增加tr的方法
2018/02/27 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
Django实现文件上传下载功能
2019/10/06 Python
wxpython绘制圆角窗体
2019/11/18 Python
Python Selenium参数配置方法解析
2020/01/19 Python
Python是怎样处理json模块的
2020/07/16 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
医院护理人员的自我评价分享
2013/10/04 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA