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 06 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
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中看实例学正则表达式
2006/12/25 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP正则验证Email的方法
2015/06/15 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
python自定义类并使用的方法
2015/05/07 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
利用Python检测URL状态
2019/07/31 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
C语言50道问题
2014/10/23 面试题
环保倡议书
2014/04/14 职场文书
监察建议书格式
2014/05/19 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
Python实现byte转integer
2021/06/03 Python
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题