使用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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
js实现随机抽奖
Mar 19 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
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
php常用字符函数实例小结
2016/12/29 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
Python写的一个简单DNS服务器实例
2014/06/04 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
django 单表操作实例详解
2019/07/30 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
NumPy排序的实现
2020/01/21 Python
详解Python 函数参数的拆解
2020/09/02 Python
程序员经常用到的UNIX命令
2015/04/13 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
监理员的岗位职责
2013/11/13 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
2014年冬季防火方案
2014/05/21 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
网络营销计划
2015/01/17 职场文书
实习介绍信范文
2015/05/05 职场文书
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers