使用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定义函数的方法
Dec 06 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
jQuery动画与特效详解
Feb 01 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
vue权限问题的完美解决方案
May 08 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
微信小程序实现音频文件播放进度的实例代码
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语法(4)
2006/10/09 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
jQuery的学习步骤
2011/02/23 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
12步教你理解Python装饰器
2016/02/25 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python enumerate内置库用法解析
2020/02/24 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
override和overload的区别
2016/03/09 面试题
生物专业个人自荐信范文
2013/11/29 职场文书
会计学毕业生求职信
2014/06/25 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
酒店厨房管理制度
2015/08/06 职场文书
团队拓展训练感想
2015/08/07 职场文书