使用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 相关文章推荐
按钮JS复制文本框和表格的代码
Apr 01 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
vue配置多页面的实现方法
May 22 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 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与数据库代码开发规范
2013/08/08 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
php无序树实现方法
2015/07/28 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python中的localtime()方法使用详解
2015/05/22 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
纪检干部先进事迹材料
2014/08/23 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers