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判断变量是否空值的代码
Oct 26 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
实例分析javascript中的异步
Jun 02 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
在HTML5 localStorage中存储对象的示例代码
Apr 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
php强制下载类型的实现代码
2011/04/21 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
python web框架学习笔记
2016/05/03 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
python通过链接抓取网站详解
2019/11/20 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
乡镇党委书记个人整改措施
2014/09/15 职场文书
公司股份合作协议书
2014/12/07 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
小学重阳节活动总结
2015/03/24 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
Node与Python 双向通信的实现代码
2021/07/16 Javascript