使用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 面向对象的 私有成员和公开成员
May 13 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
深入探寻javascript定时器
Jan 02 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
javascript实现移动端红包雨页面
Jun 23 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
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
python实现中文分词FMM算法实例
2015/07/10 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
浅谈Python 对象内存占用
2016/07/15 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
团员的自我评价
2013/12/01 职场文书
手机业务员岗位职责
2013/12/13 职场文书
小学生班会演讲稿
2014/01/09 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
创业计划之特色精品店
2019/08/12 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python