使用jQuery不判断浏览器高度解决iframe自适应高度问题


Posted in Javascript onDecember 16, 2014

这里介绍两个超级简单的方法,不用写什么判断浏览器高度、宽度啥的。

下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。

注意别放错了地方。
iframe的代码中,注意要写ID,没有ID查找不到

<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

方法一:

//注意:下面的代码是放在和iframe同一个页面调用

$("#main").load(function(){

var mainheight = $(this).contents().find("body").height()+30;

$(this).height(mainheight);

});

方法二:

//注意:下面的代码是放在test.html调用

$(window.parent.document).find("#main").load(function(){

var main = $(window.parent.document).find("#main");

var thisheight = $(document).height()+30;

main.height(thisheight);

});

在做项目的过程中需要使用iframe,但是iframe默认有一个高度,超过该默认高度的会内容会被隐藏起来,而小于该默认高度的内容呢又会把默认高度当成内容的高度,在经过寻找答案的过程中,找到了怎样去控制iframe高度自适应

iframe自适应高度本身是很简单的方法,就是在页面加载完成后,重新计算一下高度即可。

代码如下:

//公共方法:设置iframe的高度以保证全部显示数据

//function SetPageHeight() {

//    var iframe = getUrlParam('ifname');

//    var myiframe = window.parent.document.getElementById(iframe);

//     iframeLoaded(myiframe);

//}

var iframeLoaded = function (iframe) {

    if (iframe.src.length > 0) {

        if (!iframe.readyState || iframe.readyState == "complete") {

            var bHeight = 

            iframe.contentWindow.document.body.scrollHeight;

            var dHeight = 

            iframe.contentWindow.document.documentElement.scrollHeight;

            var height = Math.max(bHeight, dHeight);

            iframe.height = height;

        }

    }

}

//分页时重新设置 iframe 高度 ; 修改后:iframe.name = iframe.id

var reSetIframeHeight = function()

{

    try {

        var oIframe = parent.document.getElementById(window.name);

        oIframe.height = 100;

        iframeLoaded(oIframe);

    }

    catch (err)

    {

        try {

         parent.document.getElementById(window.name).height = 1000;

          } catch (err2) { }

    }

}

调用reSetIframeHeight();方法即可。

Javascript 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
js实现简易聊天对话框
Aug 17 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
jquery队列函数用法实例
Dec 16 #Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 #Javascript
jQuery实现数字加减效果汇总
Dec 16 #Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 #Javascript
浅谈Javascript变量作用域问题
Dec 16 #Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 #Javascript
javascript arguments使用示例
Dec 16 #Javascript
You might like
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
js压缩利器
2007/02/20 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
pyramid配置session的方法教程
2013/11/27 Python
python抓取网页中的图片示例
2014/02/28 Python
python如何求解两数的最大公约数
2018/09/27 Python
实例讲解python中的序列化知识点
2018/10/08 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
车间机修工岗位职责
2014/02/28 职场文书
2014年高考决心书
2014/03/11 职场文书
股权转让协议书
2014/04/12 职场文书
李培根演讲稿
2014/05/22 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
订货会邀请函
2015/01/31 职场文书
锅炉工岗位职责
2015/02/13 职场文书
品质保证书格式
2015/02/28 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android