专栏首页李维亮的博客jquery 实现iframe 自适应高度

jquery 实现iframe 自适应高度

超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。 下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。 注意别放错地方了哦。

iframe代码,注意要写ID

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

jquery代码1:

//注意:下面的代码是放在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代码2:

//注意:下面的代码是放在和iframe同一个页面调用

$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iframe自适应高度 原

    同时总结下经常用的高度           contentWindow   兼容各个浏览器,可取得子窗口的 window 对象。             c...

    tianyawhl
  • 不使用定时器实现iframe的自适应高度

    在微博上看到有人提及不使用定时器实现iframe自适应(onReadyStateChange + onLoad + onResize + onDOMSubtre...

    meteoric
  • 如何实现iframe(嵌入式帧)的自适应高度

    好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了...

    Java架构师必看
  • 实现自适应高度

    天修改一个用Excel的报表,有一个数据格是跨两列,一般单格的数据格用自动换行就可以实现自适应高度,但是跨列是不行的.查找google良久,也没发现适合的办法,...

    Java架构师必看
  • JavaScript 处理Iframe自适应高度的问题

     用到的就是iframe嵌套的页面加载完毕的时候,运用onload事件来获取嵌套在iframe中网页的高度,然后赋值给Iframe的高度即可。

    aehyok
  • iframe高度自适应的IE解决方案

    主页面main.html  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht...

    菩提树下的杨过
  • 真正解决iframe高度自适应问题

    拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。

    yuezhongbao
  • 让动态的 iframe 内容高度自适应

    注意到这里的 this.contentWindow 其实就类似与下方的 name值对应的iframe2,两种引用方式是等价的

    书童小二
  • JQuery iframe宽高度自适应浏览器窗口大小的解决方法

    https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

    授客
  • textarea内容自动撑开高度,实现高度自适应

    大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势。

    Daotin
  • div高度自适应

    div高度自适应, 一般设置min-height值即可。 如min-height: 200px, 当div的内容高于200px时, div会自动伸展。IE6不支...

    小小许
  • UIWebView自适应高度

    用户8671053
  • div高度自适应

    田田田
  • 12个用得着的JQuery代码片段

    在项目的前端页面里,相对于其它的导航菜单,激活的导航菜单需要设置不同的背景。这种效果实现的方式有很多种,下面是使用JQuery实现的一种方式:

    用户1503405
  • 自适应页面高度

          困扰了我很久的问题:我很想让一个框架左侧的菜单(控件或者是折叠的LI或者别的),能够自动适应浏览器的变化。因为即使是同一分辨率,页面中的实际高度也不...

    用户1075292
  • Android RecycleView高度自适应

    当RecycleView的高度为wrap_content 并且item的高度也是wrap_content时 RecycleView的高度就不会根据内容自动设置

    剑行者
  • 前端知识体系整理(不断更新)

    var x = {}; var y = []; var z = null; typeof x; // "object" typeof y; // "objec...

    一个会写诗的程序员
  • Merit价值和成果管理系统——1侧栏与iframe

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

    hotqin888
  • 谈谈CSS sandbox的实现

    最近接了个需求,要实现一个FAQ页面。我心想那不简单嘛,就一个Tab加内容展示,结果最后排期还挺紧的,着实蛋疼了一小下。下面分享一些小心得:

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券