使用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 数组详解
Oct 10 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 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详细彻底学习Smarty
2008/03/27 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
javascript 面向对象继承
2009/11/26 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
Flask之请求钩子的实现
2018/12/23 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
经典大学生求职信范文
2014/01/06 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
关于诚信的活动方案
2014/08/18 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书