使用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 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
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
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
python实现划词翻译
2020/04/23 Python
python处理大数字的方法
2015/05/27 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
信息工作经验交流材料
2014/05/28 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android