使用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 中文字符串处理额外注意事项
Nov 15 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
Javascript获取某个月的天数
May 30 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 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 定义404页面的实现代码
2012/11/19 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
基于PHP制作验证码
2016/10/12 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
javascript动画浅析
2012/08/30 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
详解Webpack DLL用法以及功能
2017/07/11 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
美国校园市场:OCM
2017/06/08 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
会计专业自我鉴定范文
2013/12/29 职场文书
驾驶员岗位职责
2014/01/29 职场文书
中国好声音广告词
2014/03/18 职场文书
2014年医院工作总结
2014/11/20 职场文书
青年文明号汇报材料
2014/12/23 职场文书
公积金接收函格式
2015/01/30 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
MySQL分区以及建索引的方法总结
2022/04/13 MySQL