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事件实现代码
Mar 12 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
JS跨域问题详解
Nov 25 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
Vue实现日历小插件
Jun 26 Javascript
js实现时钟定时器
Mar 26 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 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生成静态页面详解
2006/12/05 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
浅谈javascript的原型继承
2012/07/25 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python处理Excel文件实例代码
2017/06/20 Python
python requests指定出口ip的例子
2019/07/25 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
转让协议书范本
2014/04/15 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技