Iframe实现跨浏览器自适应高度解决方法


Posted in Javascript onSeptember 02, 2014

本文以实例形式讲述了Iframe实现跨浏览器自适应高度解决方法,非常具有实用价值。分享给大家供大家参考之用。具体方法如下:

该方法使用了jQuery,因此需要在iframe的src页面里面引入jQuery。

父页面里面相对简单一点,主要包含以下代码:

<iframe id="if1" scrolling="no" src="2.html"></iframe>

在iframe的src页面里面代码如下:

<script type="text/javascript">
function resizeContent()
{
    $(window.parent.document).find("#if1").height($("#content").height());
}

function show400()
{
    if($("#test400").css("display") == "none")
    {
       $("#test400").css("display","");
       resizeContent();
    }
    else
    {
       $("#test400").css("display","none");
       resizeContent();
    }
}
$(document).ready(function(){
    resizeContent();
})
</script>
<div id="left111">
 <div class="mnav" onclick="test400()"></div>
 <div class="mnav"><a href="ProductList.html">超级链接</a></div>
 <div class="mnav"><a href="ProductCategory.html">超级链接</a></div>
 <div class="mnav"><a href="ProductCategory.html">超级链接</a></div>
 <div id="test400" style="display:none;height:400px;"></div>
 <div class="mnav"><a href="Orders.html">超级链接</a></div>
 <div class="mnav Mcurrent"><a href="Keywords.html">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <div class="mnav"><a href="#">超级链接</a></div>
 <br />
</div>

注释:

这里面的

$(window.parent.document).find("#if1").height($("#content").height());

这句话最初是:

$(window.parent.document).find("#if1").height($(document).height());

可以实现自适应高度,但是不能实现缩放自适应。因为document的高度是展示内容出现过的最高高度,所以这里如果点击展开,iframe不会缩小,只会展示最高出现过的高度

所以这里要用一个父层容器,也就是最新的代码。这样就可以实现自适应了。

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

Javascript 相关文章推荐
javascript 面向对象继承
Nov 26 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
jQuery级联操作绑定事件实例
Sep 02 #Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 #Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 #Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 #Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 #Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 #Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 #Javascript
You might like
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
探讨Vue.js的组件和模板
2017/10/27 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
金融专业个人求职信
2013/09/22 职场文书
业务部主管岗位职责
2014/01/29 职场文书
毕业生求职信
2014/06/10 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js