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


Posted in Javascript onJanuary 22, 2007

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 相关文章推荐
Javascript JSQL,SQL无处不在,
May 05 Javascript
JS重要知识点小结
Nov 06 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
写一个Vue loading 插件
Nov 09 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Opacity.js
Jan 22 #Javascript
html读出文本文件内容
Jan 22 #Javascript
用ADODB.Stream转换
Jan 22 #Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 #Javascript
用正则xmlHttp实现的偷(转)
Jan 22 #Javascript
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 #Javascript
Javascript技术技巧大全(五)
Jan 22 #Javascript
You might like
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
js 对象是否存在判断
2009/07/15 Javascript
关于this和self的使用说明
2010/08/01 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
jstree的简单实例
2016/12/01 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
为什么是 Python -m
2020/06/19 Python
服装设计专业毕业生推荐信
2013/11/09 职场文书
合作协议书
2014/04/23 职场文书
农村文化建设标语
2014/10/07 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
企业务虚会发言材料
2014/10/20 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL