教你用jquery实现iframe自适应高度

 更新时间:2014年06月11日 11:11:25   作者:  
iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,今天我们就来分享2种使用jquery实现iframe自适应高度的代码

iframe代码,注意要写ID

复制代码 代码如下:

<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>


jquery代码一:

复制代码 代码如下:

//注意:下面的代码是放在test.html调用
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});


jquery代码二:

复制代码 代码如下:

//注意:下面的代码是放在和iframe同一个页面调用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});

相关文章

  • 基于JQuery的密码强度验证代码

    基于JQuery的密码强度验证代码

    密码强度验证的方式有很多,今天给大家推荐一个通过JQuery实现的密码强度验证控件,只需要很少的代码便能实现。
    2010-03-03
  • 省市区三级联动jquery实现代码

    省市区三级联动jquery实现代码

    这篇文章主要为大家详细绍了省市区三级联动jquery实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 用jquery实现学校的校历(asp.net+jquery ui 1.72)

    用jquery实现学校的校历(asp.net+jquery ui 1.72)

    学校日历有以下几个特点:1显示本周是本学期的第几周;2显示今日事件;3特殊显示有事件的日期,点击该日期显示本日事件。
    2010-01-01
  • jquery制作漂亮的弹出层提示消息特效

    jquery制作漂亮的弹出层提示消息特效

    这篇文章主要介绍了jquery制作漂亮的弹出层提示消息特效,需要的朋友可以参考下
    2014-12-12
  • 文本框只能选择数据到文本框禁止手动输入

    文本框只能选择数据到文本框禁止手动输入

    文本框只能上人家选择数据进去,不能手动输入,经搜索研究发现个不错的解决方法,感兴趣的朋友可以参考下
    2013-11-11
  • 深入探秘jquery瀑布流的实现

    深入探秘jquery瀑布流的实现

    瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。
    2016-01-01
  • 多种JQuery循环滚动文字图片效果代码

    多种JQuery循环滚动文字图片效果代码

    这篇文章主要为大家提供了多种JQuery循环滚动文字图片效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 基于jQuery实现的水平和垂直居中的div窗口

    基于jQuery实现的水平和垂直居中的div窗口

    在建立网页布局的时候,我们经常会面临一个问题,就是让一个div实现水平和垂直居中,虽然好几种方式实现,但是今天介绍时我最喜欢的方法,通过css和jQuery实现。
    2011-08-08
  • jQuery 拖动层(在可视区域范围内)

    jQuery 拖动层(在可视区域范围内)

    获取层元素,在浏览器可视区域的最左、最边,最上、最下的值。并且在拖动层的过程中,把当前层的坐标值,去和这几个值,做比较,如果超过这些值。那么就不能再拖动这个方向,即把值设为最小或最大
    2012-05-05
  • jQuery 中的 DOM 操作

    jQuery 中的 DOM 操作

    在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互目的.
    2016-04-04

最新评论