教你用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轮播图效果精简版,结合完整实例形式分析了jQuery响应鼠标事件及针对页面元素的遍历操作相关技巧,需要的朋友可以参考下
    2016-09-09
  • 高效Web开发的10个jQuery代码片段

    高效Web开发的10个jQuery代码片段

    这篇文章主要为大家详细介绍了高效Web开发的10个jQuery代码片段,具有一定的实用性和参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • jQuery之过滤元素操作小结

    jQuery之过滤元素操作小结

    这篇文章主要介绍了jQuery中的过滤元素操作。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 利用jQuery实现漂亮的圆形进度条倒计时插件

    利用jQuery实现漂亮的圆形进度条倒计时插件

    jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件。本篇文章给大家分享利用jQuery实现漂亮的圆形进度条倒计时插件,感兴趣的朋友一起看看吧
    2015-09-09
  • jQuery增加自定义函数的方法

    jQuery增加自定义函数的方法

    这篇文章主要介绍了jQuery增加自定义函数的方法,通过简单的样式添加为例分析了jquery增加自定义函数的实现技巧,非常简单实用,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 删除节点的jquery代码

    删除节点的jquery代码

    节点的删除在应用中比较常见,如何动态删除某一节点来实现某一特殊效果,下面有个不错的示例,希望对大家有所帮助
    2014-01-01
  • jQuery实现电梯导航案例详解(切换 网页区域)

    jQuery实现电梯导航案例详解(切换 网页区域)

    日常生活中用手机,电脑浏览网页时,滑到了页面下端后想返回顶部 或 跳转到页面别的版块,用鼠标滚动很麻烦,网页电梯导航就可以很方便的精准到达目标版块,本文给大家分享jquery电梯导航案例详解,感兴趣的朋友一起看看吧
    2022-05-05
  • jQuery Easyui 下拉树组件combotree

    jQuery Easyui 下拉树组件combotree

    项目中做角色授权时,需要做一个下拉框带树结构的 并且可以多选的组件,就想到了easyui的combotree,下面通过实例代码给大家介绍下Easyui 下拉树组件combotree
    2016-12-12
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS

    jQuery添加/改变/移除CSS类及判断是否已经存在CSS

    正如标题所言会用到removeClass移除CSS类、addClass添加CSS类、toggleClass添加或者移除CSS类,hasClass判断是否已经存在CSS
    2014-08-08
  • jQuery遍历DOM元素与节点方法详解

    jQuery遍历DOM元素与节点方法详解

    这篇文章主要介绍了jQuery遍历DOM元素与节点方法,结合实例形似详细分析了jQuery遍历DOM父级节点,子级节点及兄弟节点的相关技巧,需要的朋友可以参考下
    2016-04-04

最新评论