使用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 相关文章推荐
jquery zTree异步加载简单实例分享
Feb 05 Javascript
php与js的区别是什么
Aug 05 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
js格式化时间的方法
Dec 18 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
jquery延迟对象解析
Oct 26 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 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/09/13 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
javascript下function声明一些小结
2007/12/28 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
python中的随机函数random的用法示例
2018/01/27 Python
python更改已存在excel文件的方法
2018/05/03 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
linux下进程间通信的方式
2013/01/23 面试题
《穷人》教学反思
2014/04/08 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
先进典型事迹材料
2014/12/29 职场文书
简历自我评价模板
2015/03/11 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
活动总结模板大全
2015/05/11 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript