关闭

jquery库实现iframe自适应内容高度和宽度

标签: jquery
88人阅读 评论(0) 收藏 举报
分类:

javascript原生和jquery库实现iframe自适应内容高度和宽度—推荐使用jQuery的代码!

<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%"   frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe> 

基于Jquery库的代码很好实现:

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
      $("#mainframe").load(function(){ 
      $(this).height(0); //用于每次刷新时控制IFRAME高度初始化 
      var height = $(this).contents().height() + 10; 
      $(this).height( height < 500 ? 500 : height ); 
    }); 
}); 
</script> 

‍基于JS原生代码的实现:

<script language="javascript"> 
       if (window.parent.length>0){window.parent.document.all.mainframe.style.height=document.body.scrollHeight;} 
</script> 

只需在你被iframe调用的文件之后加入上面这段即可!
这个也可以控制iframe的高度随内容的多而自动增长

<iframe name="web" width="100%" frameborder=0 height="100%" src="index.php" id="web" onload="this.height=web.document.body.scrollHeight+20" ></iframe>
0
0
查看评论

iframe高度宽度自适应

<!DOCTYPE html> <html> <head> <title>iframe宽度高度自适应</title> </head> <body id="body" height="1...
  • super__dreamer
  • super__dreamer
  • 2016-09-08 10:51
  • 3851

真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

今天有朋友问到我关于“iframe自适应高度”的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定。期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条。也就是当窗口放大时iframe没有自动跟随变大显得很小,或是当窗口缩小时iframe还是之前那么大就出现了滚动条。还有或是高度...
  • alex8046
  • alex8046
  • 2016-05-19 18:37
  • 144432

iframe自适应高度和宽度 全css实现无javascript

  菜单管理>                         ...
  • okkk
  • okkk
  • 2010-04-28 11:19
  • 14061

jquery控制iframe根据内容高度自动调整问题。

1、问题描述 $(function() {     $("#JmenuFrame").load(function() {         var height = $(this).contents().find...
  • chen798213337
  • chen798213337
  • 2017-02-26 14:36
  • 850

iframe根据内容自适应高度教程

博主今天调iframe根据内容自适应高度,发现好多坑。首先呢发现得到全文的高度在各大浏览器里的写法是不一样的,IE和火狐是一种写法,360和谷歌是另一种。所以呢就得根据浏览器的名称用不同的代码;后来用navigator.appName(官方说是得到浏览器的名称,就是个大坑)拿浏览器的名称,结果发现I...
  • qq_33556185
  • qq_33556185
  • 2016-02-15 19:29
  • 6889

iframe高度自适应内容

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。 if...
  • yipanbo
  • yipanbo
  • 2016-04-27 19:32
  • 1512

jQuery解决iframe高度随内容自动调整

网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试。<!-- $( function() { //iframe高度随内容自动调整 $(.ma...
  • huhai463127310
  • huhai463127310
  • 2009-12-19 20:47
  • 7030

iframe 根据内容自适应高度-终极解决方案

第一中方法: 在子页面加载完毕的时候执行 parent.document.getElementById("iframe").height=0; parent.document.getElementById("iframe").height=document.b...
  • ye987987
  • ye987987
  • 2016-07-05 15:41
  • 28065

jq_jquer获取iframe的高度根据页面内容自适应

JQ代码 $("#mainframe").load(function () { var if_w = $("iframe").width(); var if_h = $("#mainframe").contents().f...
  • cplvfx
  • cplvfx
  • 2017-06-15 13:07
  • 814

<iframe>标签自适应高度和宽度

// iFrame 自适应高度 function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.fr...
  • lx19860203
  • lx19860203
  • 2014-12-29 15:03
  • 2881
    个人资料
    • 访问:444次
    • 积分:104
    • 等级:
    • 排名:千里之外
    • 原创:9篇
    • 转载:1篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论