使用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 相关文章推荐
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
回顾Javascript React基础
Jun 15 Javascript
原生js滑动轮播封装
Jul 31 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利用cookie实现自动登录的方法
2014/12/10 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
vue实现购物车案例
2020/05/30 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
深入理解python函数递归和生成器
2016/06/06 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
在校生钳工实习自我鉴定
2013/09/19 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
授权委托书
2014/09/17 职场文书
装配出错检讨书
2014/09/23 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
起诉意见书范文
2015/05/19 职场文书
党员转正介绍人意见
2015/06/03 职场文书
色戒观后感
2015/06/12 职场文书
网络研修随笔感言
2015/11/18 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers