iframe自适应内容高度js代码

写个初级版的先用着吧。就几行代码。

 代码如下 复制代码

<!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>
        <base href="<%=basePath%>">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style type="text/css">
</style>
<script type="text/javascript">
    //浏览器高度自适应
    function SetCwinHeight(iframeObj){
        var minHeight=400;//如果超过最小高度则自动变高
      if (document.getElementById){
           if (iframeObj && !window.opera){
                if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){
                    var h=iframeObj.contentDocument.body.offsetHeight;
                    if(h<minHeight){
                        h=minHeight;
                    }
                    iframeObj.height = h;
                    document.getElementById('leftiframe').height = h;
                }else if(document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){
                    var h=document.frames[iframeObj.name].document.body.scrollHeight;
                    if(h<minHeight){
                        h=minHeight;
                    }
                     iframeObj.height = h;
                     document.getElementById('leftiframe').height =h;
                }
           }
      }
    }
    function init(){
        var main_width=document.getElementById('mainmenu').style.width;
        var left_width=document.getElementById('leftmenu').style.width;
        var h=document.getElementById('rightmenu').style.height;
        document.getElementById('mainmenu').style.height=h;
        document.getElementById('rightmenu').style.width =parseInt(main_width)-parseInt(left_width)-5+'px';
    }
</script>
    </head>
    <body bgcolor="#E0E0E0" onload="init();">
        <center>
        <div id="topmenu">
            <IFRAME NAME="topm" width=100% height=200 frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/top.jsp" scrolling=no
                allowTransparency="true"></IFRAME>
        </div>
        <div id="mainmenu" style="border: 1px blue solid;width: 1024px;text-align: center;">
            <div id="leftmenu" style="border: 1px green solid; float:left;width:150px;">
                <IFRAME NAME="leftm" id="leftiframe" width=100% height=100% frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/left.jsp" scrolling=no
                    allowTransparency="true"></IFRAME>
            </div>
            <div id="rightmenu" style="border: 1px red solid;float:left;width:78%;height: 400px;">
                <IFRAME onload="SetCwinHeight(this);" NAME="rightm" width=100% height=100% frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/right.jsp" scrolling=no
                    allowTransparency="true" align=center></IFRAME>
            </div>
        </div>
        <div id="bottommenu">
            <IFRAME NAME="bottomm" width=1002 height=73 frameborder=0 marginwidth=0 marginheight=0 SRC="/register/pub/bottom.jsp" scrolling=no
                allowTransparency="true" align=center></IFRAME>
        </div>
        </center>
</html>

//窗体加载时获取左侧iframe的宽度，浏览器宽度-左侧=自动判断右侧rightframe的宽度，避免写死。

点击左侧菜单，相应打开右侧页面，由于右侧页面高度不一，且可能影响左侧导航丑陋，故而做了下判断。写在上面的js的SetCwinHeight方法中。

右侧导航随内容高度变化而变化，左侧导航则至少维持400的高度，避免右侧过短影响左侧显示。

时间： 2025-01-29 07:41:18

iframe自适应内容高度js代码的相关文章

android-Android webview如何自适应内容高度

问题描述 Android webview如何自适应内容高度 如题:Android webview如何自适应内容高度???谢谢啦 解决方案 iOS的WebView自适应内容高度(真实高度)Android 获取WebView的内容宽度高度 解决方案二: wrap_content不行吗? 解决方案三: WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); settings.setSuppor

复制Input内容的js代码_支持所有浏览器，修正了Firefox3.5以上的问题_javascript技巧

但IE6两行JS代码就可以,IE7以上也差不多,只不过出来一个安全提示比较恶心,用户如果看到了,一定有怀疑: 再但就是Firefox.Chrome等根本就不让你复制: 记得以前网上有这方面的代码,找了一下,发现全部不能在firefox3.5以上的版本中应该,最后终于找到了一个,代码还相当相当的复杂,不太敢用. 最后,憋的实在没有办法了,查了查资料,自已写了一个: 主要的理解的几个点: 1.Firefox这些浏览器,出于安全考虑吧,直接是不让复制的: 2.在Flash中,可以用System.set

flash中AS3 让TextField自适应内容高度（根据内容自动调整高度）

时使用TextField文本框显示文字时,想让TextField能随内容自动调整高度,而不是设置个固定高度.如下图:   实现方法: 在设置完 TextField 的文本内容后,将其高度设置为内容高度(textHeight).同时由于文本内容区域距边框上下左右都有2像素边距,所有高度还要加4. package {     import flash.display.Sprite;     import flash.text.TextField;     import flash.text.Text

关于div自适应高度/左右高度自适应一致的js代码_javascript技巧

在使用DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题. 为了保证页面的整体美观性,需要将两个或者多个层的高度/宽度保持一致. 左右自适应高度一致 Jquery 复制代码 代码如下: <div style="width:300px;"> <div id="Left" style="float:left;background-color:blue;">1<br/>3<br/&g

用JS操作FRAME中的IFRAME及其内容的实现代码_javascript技巧

问:想通过在地址栏输入一段JS来设置一下页面里某个FRAME中的IFRAME的URL和里面某个TEXT的值,然后点击提交按钮.注意:页面是其它网站的,不要给出一些改动页面代码的答案.具体情况如下: 主页面.htm: view plaincopy to clipboardprint? <FRAMESET border=0 frameSpacing=0 frameBorder=0 cols=*,1005,*> <FRAME src="blank.html" frameBo

js实现iframe动态调整高度的代码_javascript技巧

复制代码 代码如下: function SetWinHeight(obj)  {  var win=obj;  if (document.getElementById)  {     if (win && !window.opera)     {      if (win.contentDocument && win.contentDocument.body.offsetHeight)       win.height = win.contentDocument.body.

当滚动条滚动到页面底部自动加载增加内容的js代码_javascript技巧

1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s

smarty巧妙处理iframe中内容页的代码_php技巧

废话不多说,进去正题 做过后台的,应该都知道,经常要用到iframe来处理导航,如果按一般的思路来做这个功能,还是挺简单的 可是当我用smarty的时候,就发现了问题,比如,一个iframeset分成了:头部top,左边menu,右边main, 正常情况,用smarty来处理的话,一般是这样: 如果3个页面仅仅只是静态页面的话,就是如下处理 iframe.html代码: 复制代码 代码如下: <frame src="top.html" name="topFrame&qu

关于图片按比例自适应缩放的js代码_图象特效

如下图. 瞄了一下,居中可以用 text-align:center; 来实现.而按比例缩放,利用预设 <img /> 的 width .height 属性解决不了.因为用户图片可能是很长的,也可能是很宽的.在线上想了一下他们的关系,按条件来判断是这样的: 复制代码 代码如下: if(实际宽度 > 预览最大宽度) { 缩放宽度 = 预览最大宽度 } if(实际高度 > 预览最大高度) { 缩放高度 = 预览最大高度 } 但是这样会有问题,比如当宽度和高度都被缩放,如果缩放比较不同,图