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 相关文章推荐
js 判断一个元素是否在页面中存在
Dec 27 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
JavaScript的Set数据结构详解
Feb 18 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
PHP中文汉字验证码
2007/04/08 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
Python标准库内置函数complex介绍
2014/11/25 Python
在Python中处理XML的教程
2015/04/29 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
Python合并多个Excel数据的方法
2018/07/16 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
如何完美的建立一个python项目
2020/10/09 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
社保缴纳证明申请书
2014/11/03 职场文书
社区节水倡议书
2015/04/29 职场文书
保护环境建议书作文300字
2015/09/14 职场文书