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 相关文章推荐
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
基于vue实现分页效果
Nov 06 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
jQuery实现简单全选框
Sep 13 jQuery
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
关于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
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
Ext 今日学习总结
2010/09/19 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
python类的继承实例详解
2017/03/30 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Django实现表单验证
2018/09/08 Python
django使用admin站点上传图片的实例
2019/07/28 Python
对于Python深浅拷贝的理解
2019/07/29 Python
Python有参函数使用代码实例
2020/01/06 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
保密工作实施方案
2014/02/24 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
HTML中的表单元素介绍
2022/02/28 HTML / CSS
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers