使用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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
浅析Jquery操作select
Dec 13 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 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 Ctemplate引擎开发相关内容
2012/03/03 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
vue-axios使用详解
2017/05/10 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
Python字典简介以及用法详解
2016/11/15 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
外贸业务员岗位职责
2013/11/24 职场文书
小学毕业家长寄语
2014/01/19 职场文书
幼儿园招生广告
2014/03/19 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
学校师德师风整改措施
2014/10/27 职场文书
美丽心灵观后感
2015/06/01 职场文书
七年级作文之下雨天
2019/12/23 职场文书
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技