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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 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
PHP5 安装方法
2006/10/09 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
深入理解PHP中的global
2014/08/19 PHP
php短信接口代码
2016/05/13 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
django主动抛出403异常的方法详解
2019/01/04 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Python面向对象编程基础实例分析
2020/01/17 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
函授大专自我鉴定
2013/11/01 职场文书
分公司经理岗位职责
2013/11/11 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
书法培训心得体会
2014/01/05 职场文书
自荐信写法介绍
2014/01/25 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
大学生创业计划书
2014/08/14 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书