使用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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
Angular中$compile源码分析
Jan 28 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
Node.js API详解之 console模块用法详解
May 12 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程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php设计模式小结
2013/02/15 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
js调用flash的效果代码
2008/04/26 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
详解vue中组件参数
2018/07/09 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
Python模块常用四种安装方式
2020/10/20 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
《海底世界》教学反思
2014/04/16 职场文书
安全保证书范文
2014/04/29 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
升职感谢信
2015/01/22 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
业务员年终工作总结2015
2015/05/28 职场文书