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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
js表格分页实现代码
Sep 18 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP可变变量学习小结
2015/11/29 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
javascript与webservice的通信实现代码
2010/12/25 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
zbar解码二维码和条形码示例
2014/02/07 Python
Python脚本实现网卡流量监控
2015/02/14 Python
python中常用检测字符串相关函数汇总
2015/04/15 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python中bytes和str类型的区别
2019/10/21 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
蔻驰英国官网:COACH英国
2020/07/19 全球购物
少先队入队活动方案
2014/02/08 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
部队个人年终总结
2015/03/02 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
护理自荐信
2019/05/14 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
使用Springboot实现健身房管理系统
2021/07/01 Java/Android