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


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 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP静态成员变量
2017/02/14 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
javascript数组去掉重复
2011/05/12 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
spyder常用快捷键(分享)
2017/07/19 Python
django query模块
2019/04/20 Python
python实现websocket的客户端压力测试
2019/06/25 Python
python 动态调用函数实例解析
2019/10/21 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
程序员跳槽必看面试题总结
2013/06/28 面试题
银行职业规划书范文
2013/12/28 职场文书
上学迟到的检讨书
2014/01/11 职场文书
职业女性的职业规划
2014/03/04 职场文书
工程项目建议书范文
2014/03/12 职场文书
二手房买卖协议书
2014/04/10 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
优秀团支部申报材料
2014/12/26 职场文书
董事长开业致辞
2015/07/29 职场文书
2016高考冲刺决心书
2015/09/23 职场文书