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 (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
浅谈jquery事件处理
Apr 24 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python rsa 加密解密
2017/03/20 Python
Python创建xml文件示例
2017/03/22 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
python进行参数传递的方法
2020/05/12 Python
python redis存入字典序列化存储教程
2020/07/16 Python
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
举例说明类变量和实例变量的区别
2016/06/30 面试题
英文留学推荐信范文
2014/01/25 职场文书
高二物理教学反思
2014/02/08 职场文书
怎么写自荐书范文
2014/02/12 职场文书
家长对老师的感言
2014/03/11 职场文书
销售员岗位职责
2015/02/10 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
Redis 常见使用场景
2021/08/30 Redis
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python