【求助】IFRAME自适应高度后滚动条消失

yingyuebingya 2014-04-03 03:17:21
IFRAME原来是高度530，在IE6下正好，其他浏览器或者分辨率下会高度过低，框架下面留白，然后找了自适应的代码如下：


<div id="content">                

                <iframe id="UFrame" name="UFrame" width="100%" frameborder="0" scrolling="yes" marginwidth="0" marginheight="0" ></iframe>

               <script type="text/javascript">

                    function reinitIframe(){

                        var iframe = document.getElementById("UFrame");

                        try{

                            var bHeight = iframe.contentWindow.document.body.scrollHeight;

                            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

                            var height = Math.max(bHeight, dHeight);

                            iframe.height =  height;

                        }catch (ex){}

                        }

                    window.setInterval("reinitIframe()", 200);

                </script> 

            </div>

高度自适应解决了，可是原来有滚动条的，现在没有了，如下图：


分别是IE6和CHROME下的截图，谁帮忙看下是哪里的问题？框架外层是EXTJS布局的。
...全文
512 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
yingyuebingya 2014-04-08
  • 打赏
  • 举报
 回复
感谢楼上给的代码，最后还是从博客 - 园得到的思路，这里没以前好了
yingyuebingya 2014-04-08
  • 打赏
  • 举报
 回复 

function SetCwinHeight(){   
                        var h;
                        if(navigator.userAgent.indexOf("MSIE")>0){
                            h = document.getElementById("panel-1022").clientHeight 
                                - document.getElementById("header-1029").clientHeight;
                        }else{
                            h = document.getElementById("ext-gen1046").clientHeight;
                        }                     
                        document.getElementById("UFrame").height = h;
                    }
                    window.setInterval("SetCwinHeight()", 2000);
问题的原因找到了，IFRAME的高度需要的是clientHeight，网上搜出来的都是框架内容页面的scrollHeight。 EXTJS本身已经实现高度自适应了，所以简单的方法是直接去取框架外层DIV的高度重新设定下新的高度就可以。 在IE和非IE下有点不一样！是不是跟EXTJS在IE和非IE下的加载呈现顺序有关就不太清楚了。
yingyuebingya 2014-04-03
  • 打赏
  • 举报
 回复
O(∩_∩)O谢谢楼上，代码好多，我先看看
md5e 2014-04-03
  • 打赏
  • 举报
 回复 

<%@ Page Language="C#" AutoEventWireup="true" Inherits="Admin_Default" CodeFile="Default.aspx.cs" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>后台管理系统</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css">
.navPoint {color: white; cursor: hand; font-family: Webdings; font-size: 9pt}
</style>
<script src="../Scripts/jquery-1.8.3.min.js"></script>
<script language="JavaScript" type="text/javascript">
      /*
      if (window.screen) {
        var aw = screen.availWidth;
        var ah = screen.availHeight;
        window.moveTo(-3, -3);
        window.resizeTo(aw+7, ah+7);
//        
      }
      */
    function switchSysBar() {
        jQuery("#frmTitle").stop();
        if (document.getElementById("switchPoint").innerHTML == "<<") {
            jQuery("#frmTitle").animate({ width: "hide", opacity: 'hide' }, "fast", function () {
                jQuery("#frmTitle").hide();
                document.getElementById("switchPoint").innerHTML = ">>"
                _menu_width = 0;
                jQuery(window).resize();
            });
        } else {
            jQuery("#frmTitle").animate({ width: "show", opacity: 'show' }, "fast", function () {
                jQuery("#frmTitle").show();
                document.getElementById("switchPoint").innerHTML = "<<"
                _menu_width = 171;
                jQuery(window).resize();
            });
        }
    }
    </script>
</head>
<style>
	body{width:100%; height:auto; overflow-y:hidden; overflow-x:auto; padding:0px; margin:0px;}
	#Right{
		scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
		scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
		scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/
		scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/
		scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/
		scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴	影的颜色*/
		scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/	
		scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
		Cursor:url(mouse.cur); /*自定义个性鼠标*/
	}
	#dv_top ul,li{
	list-style:none;
	padding:0; margin:0;
	font-size:14px;
	}
	#dv_top { border-bottom:1px #000 solid; height:auto; width:100%;}
	#dv_top li{
	margin-left:2px;float:left; background-color:#FFF; width:100px; padding-top:10px; height:20px; text-align:center;
	border:1px #000 solid; border-bottom:none; font-weight:bold; color:#CCC; cursor:pointer;
	}
	#dv_top .sel
	{
		color:#2989F3; background-color:#E9FCFE
	}
	</style>
<body style="margin: 0px;overflow:hidden; height:100%;" scroll="no">
<script>
    var thisClass;
    jQuery(document).ready(function () {
        jQuery("#dv_top li").click(function () {
            jQuery(".dv_top").attr("class", "");
            jQuery(this).attr("class", "dv_top sel");
            thisClass = "dv_top sel";
            window.open(jQuery(this).attr("menuUrl"), "Left");
        });
    });
     </script>
<form id="form1" runat="server">
  <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
    <tr>
      <td height="50" colspan="3" align="left" valign="bottom" nowrap id="frmTitle2" background="<%= admin_res_path %>Images/login_06.gif" ><div id="dv_top" style="width:400px; height:auto; float:left;" >
          <ul>
            <li class="dv_top sel" onmouseover="thisClass=this.className;this.className='dv_top sel';" onmouseout="this.className=thisClass;" num="0" menuUrl="leftmenu_for_content.aspx">内容管理</li>
            <li onmouseover="thisClass=this.className;this.className='dv_top sel';" onmouseout="this.className=thisClass;" style="display:;" num="2" menuUrl="leftmenu_for_system.aspx">系统设置</li>
          </ul>
        </div>
        <div style="width:200px; height:auto; float:right; font-size:12px;" > <a href="ModiPassWord.aspx" target='Right' style="color:#FFFFFF;">修改密码</a> <a href="Login.aspx?acction=quit" style="color:#FFFFFF;">退出登陆</a> </div></td>
    </tr>
    <tr>
      <td align="center" nowrap valign="top" id="frmTitle" height="100%"><iframe id="Left" class="ifram_autoheight" name="Left" src="leftmenu_for_content.aspx"   scrolling="no" frameborder="0" style="width:171px;height:100%"  > </iframe></td>
      <td style="width: 9pt" height="100%" id="cc"><table border="0" cellpadding="0" cellspacing="0" height="100%" bgcolor="#599DE8">
          <tr style="cursor:hand;">
            <td id="qh" style="HEIGHT: 100%; width: 13px; cursor:pointer" onclick="switchSysBar()" title="点击关闭/打开左栏"><font style="FONT-SIZE: 9pt; CURSOR: default; COLOR: #ffffff"> <br/>
              <br/>
              <br/>
              屏幕切换<br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <span id="switchPoint" title="点击关闭/打开左栏"><<</span><br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              屏幕切换<br/>
              <br/>
              <br/>
              <br/>
              <br/>
              </font></td>
          </tr>
        </table></td>
      <td height="100%" width="100%" valign="top"><iframe frameborder="0" class="ifram_autoheight" id="Right" name="Right" scrolling="auto" src="Main.aspx"  style="width:100%;height:100%;overflow-x:hidden;" > </iframe></td>
    </tr>
  </table>
</form>
<script>
    var _content_height = 100;
    var _content_width;
    var _content_resize;
    var _menu_width;
    jQuery(document).ready(function () {
        _content_width = jQuery(window).width() - jQuery("#frmTitle").width();
        _menu_width = jQuery("#frmTitle").width();
        jQuery(window).resize(function () {
            jQuery("#Left").height(jQuery(window).height() - 50);
            jQuery("#Left").contents().find(".menu").height(jQuery(window).height() - 50 - 68);
            jQuery("#Right").height(jQuery(window).height() - 50);
            jQuery("#Right").contents().find(".list").height(jQuery(window).height() - 50 - _content_height);
            _content_width = jQuery(window).width() - _menu_width;
            if (_content_resize != null) {
                _content_resize();
            }

        });
        jQuery("#Left").load(function () {
            jQuery("#Left").height(jQuery(window).height() - 50);
            jQuery("#Left").contents().find(".menu").height(jQuery(window).height() - 50 - 68);
        });
        jQuery("#Right").load(function () {
            jQuery("#Right").height(jQuery(window).height() - 50);
            jQuery("#Right").contents().find(".list").height(jQuery(window).height() - 50 - _content_height);
        });
    });
</script>
</body>
</html>
md5e 2014-04-03
  • 打赏
  • 举报
 回复
主框架default.aspx <script> var _content_height = 100; var _content_width; var _content_resize; var _menu_width; jQuery(document).ready(function () { _content_width = jQuery(window).width() - jQuery("#frmTitle").width(); _menu_width = jQuery("#frmTitle").width(); jQuery(window).resize(function () { jQuery("#Left").height(jQuery(window).height() - 50); jQuery("#Left").contents().find(".menu").height(jQuery(window).height() - 50 - 68); jQuery("#Right").height(jQuery(window).height() - 50); jQuery("#Right").contents().find(".list").height(jQuery(window).height() - 50 - _content_height); _content_width = jQuery(window).width() - _menu_width; if (_content_resize != null) { _content_resize(); } }); jQuery("#Left").load(function () { jQuery("#Left").height(jQuery(window).height() - 50); jQuery("#Left").contents().find(".menu").height(jQuery(window).height() - 50 - 68); }); jQuery("#Right").load(function () { jQuery("#Right").height(jQuery(window).height() - 50); jQuery("#Right").contents().find(".list").height(jQuery(window).height() - 50 - _content_height); }); }); </script> 其它子页 <style> body, html { overflow:hidden; } </style> <script> parent._content_height = 66;//根据子页的情况给于父页预留高度 //实现父页面的自适应方法,没有设置为null parent._content_resize = function () { var _tw = 0; jQuery(".datalist .title li").each(function (i, item) { _tw = _tw + jQuery(item).width(); }); jQuery(".datalist .title li").each(function (i, item) { var c = jQuery(item).attr("class"); var w = (jQuery(item).width() / _tw) * parent._content_width; jQuery("." + c).width(w); }); } jQuery(document).ready(function () { parent._content_resize(); }); </script>
yingyuebingya 2014-04-03
  • 打赏
  • 举报
 回复
设置固定高度滚动条就可以，但是下面有空白，如下图：

yingyuebingya 2014-04-03
  • 打赏
  • 举报
 回复

像这样！
yingyuebingya 2014-04-03
  • 打赏
  • 举报
 回复
引用 4 楼 liuchaolin 的回复:
是的，我的就是不显示纵向滚动条
md5e 2014-04-03
  • 打赏
  • 举报
 回复
yingyuebingya 2014-04-03
  • 打赏
  • 举报
 回复
大神
yingyuebingya 2014-04-03
  • 打赏
  • 举报
 回复
传说自己只能顶三次，谁帮顶也有分啊
yingyuebingya 2014-04-03
  • 打赏
  • 举报
 回复
CSDN问不出答案了吗？
iframe高度自适应及隐藏滚动条的实例详解
主要介绍了iframe高度自适应及隐藏滚动条的实例详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
完美解决跨域iframe的高度自适应
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
自适应窗口大小，兼容各浏览器
自适应窗口大小，兼容各浏览器,高度没有被限制，不会出现水平滚动条哦
iframe网页上下左右布局模板
iframe网页上下左右布局模板，可以修改里面的css代码来更改各个模块的大小，位置。很基本使用的网页布局模板
iframe高度自适应及隐藏滚动条
在工作中，我们可能会遇到自己公司和其他的公司达成合作关系，从而共同开发某个项目。而这时候，我们可能就需要在自己的网站上嵌入别人做好的页面。而这种情况下，我们一般都会选择去使用iframe达到我们的目的。但是iframe用起来，真的是让人头痛，高度无法控制，难看的滚动条等等，下面我分享一下自己在处理iframe时的一些心得。 高度自适应 <iframe src="http://huichang.qun
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章