使用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利用div背景,做一个竖线的效果。
Nov 22 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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&amp;mysql(六)
2006/10/09 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
Python中的filter()函数的用法
2015/04/27 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
python psutil库安装教程
2018/03/19 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
Python 实现进度条的六种方式
2021/01/06 Python
英国著名药妆店:Superdrug
2021/02/13 全球购物
大学新生入学教育方案
2014/05/16 职场文书
2014财务年度工作总结
2014/11/11 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
商业计划书之服装
2019/09/09 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript