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 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
javascript 回调函数详解
Nov 11 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
JS backgroundImage控制
2009/05/19 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
浅析JS运动
2015/12/28 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
python使用socket进行简单网络连接的方法
2015/04/29 Python
python实现SMTP邮件发送功能
2020/06/16 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
外企C语言笔试题
2013/11/10 面试题
开水果连锁店创业计划书
2013/12/29 职场文书
运动会解说词50字
2014/01/18 职场文书
旅游文化节策划方案
2014/06/06 职场文书
航空学院求职信
2014/06/11 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python