自适应高度框架 ----属个人收藏内容

 更新时间:2007年01月22日 00:00:00   作者:  
main.htm:

<html>  
    <head>  
       <meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312' />  
       <meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com' />  
       <title>iframe自适应加载的页面高度</title>  
    </head>  

    <body>
        <div><iframe src="child.htm"></iframe></div>
    </body>
</html>

child.htm:

<html>  
<head>  
    <meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312' />  
    <meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com' />  
    <title>iframe  自适应其加载的网页(多浏览器兼容)</title>  
    <script type="text/javascript">
    <!--
    function iframeAutoFit()
    {
        try
        {
            if(window!=parent)
            {
                var a = parent.document.getElementsByTagName("IFRAME");
                for(var i=0; i<a.length; i++) //author:meizz
                {
                    if(a[i].contentWindow==window)
                    {
                        var h1=0, h2=0;
                        a[i].parentNode.style.height = a[i].offsetHeight +"px";
                        a[i].style.height = "10px";
                        if(document.documentElement&&document.documentElement.scrollHeight)
                        {
                            h1=document.documentElement.scrollHeight;
                        }
                        if(document.body) h2=document.body.scrollHeight;

                        var h=Math.max(h1, h2);
                        if(document.all) {h += 4;}
                        if(window.opera) {h += 1;}
                        a[i].style.height = a[i].parentNode.style.height = h +"px";
                    }
                }
            }
        }
        catch (ex){}
    }
    if(window.attachEvent)
    {
        window.attachEvent("onload",  iframeAutoFit);
        //window.attachEvent("onresize",  iframeAutoFit);
    }
    else if(window.addEventListener)
    {
        window.addEventListener('load',  iframeAutoFit,  false);
        //window.addEventListener('resize',  iframeAutoFit,  false);
    }
    //-->
    </script>  
</head>  
<body>
    <table border="1" width="200" style="height: 400px; background-color: yellow">
        <tr>
            <td>iframe  自适应其加载的网页(多浏览器兼容,支持XHTML)</td>
        </tr>
    </table>
</body>  
</html>

======================================

iframe标签的高度怎么样才能自适应src的页面?

例如:<iframe id=box2 name="cok" src="agree.htm" width="100%" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" ></iframe> 

这个iframe的高度怎么能自适应agree.htm的高度600?
不要告诉我设为height=600,因为这个iframe要应用几个高度不同的页面!


谢谢,找到了
<script>
function autoResize()
{
try
{
document.all["test"].style.height=test.document.body.scrollHeight
}
catch(e){}
}
</script>

<iframe id=test style="height:expression(1); aho:expression(autoResize())" src="\\"></iframe>

相关文章

  • 为javascript添加String.Format方法

    为javascript添加String.Format方法

    每次在javascript中用加号合成字符串,真的没法忍受了,今天终于找到一高手写的方法,与大家分享。
    2009-11-11
  • Radio 单选JS动态添加的选项onchange事件无效的解决方法

    Radio 单选JS动态添加的选项onchange事件无效的解决方法

    radio 单选JS动态添加的选项,onchange事件无效。使用delegate()函数可以解决该问题,具体解决方案大家通过本文详细了解下
    2016-12-12
  • js实现拖动缓动效果

    js实现拖动缓动效果

    这篇文章主要为大家详细介绍了js实现拖动缓动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 原生JS实现圆环拖拽效果

    原生JS实现圆环拖拽效果

    这篇文章主要为大家详细介绍了原生JS写一个环形的鼠标滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 图片懒加载imgLazyLoading.js使用详解

    图片懒加载imgLazyLoading.js使用详解

    这篇文章主要为大家详细介绍了图片懒加载imgLazyLoading.js的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • js 判断上传文件大小及格式代码

    js 判断上传文件大小及格式代码

    用js对上传的文件大小以及格式进行初步的判断,在服务端再进行一次判断(防止浏览器拒绝执行脚本文件)下面有个不错的方法大家可以参考下
    2013-11-11
  • js实现HTML中Select二级联动的实例

    js实现HTML中Select二级联动的实例

    下面小编就为大家分享一篇js实现HTML中Select二级联动的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • js实现超级玛丽小游戏

    js实现超级玛丽小游戏

    这篇文章主要为大家详细介绍了js实现超级玛丽小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JS折半插入排序算法实例

    JS折半插入排序算法实例

    这篇文章主要介绍了JS折半插入排序算法,以完整实例形式较为详细的分析了JavaScript实现折半插入排序的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • js字符串操作函数总结及使用方法示例

    js字符串操作函数总结及使用方法示例

    这篇文章主要介绍了js字符串操作函数toString、split、length、indexOf、lastIndexOf、replace、replaceAll、charAt、charCodeAt、contact、slice、substring、substr、match、exec、search、trim、includes
    2023-08-08

最新评论