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


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中的关于类型转换的性能优化
Dec 14 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 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
建立动态的WML站点(三)
2006/10/09 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
yii操作session实例简介
2014/07/31 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
php中数组最简单的使用方法
2020/12/27 PHP
表单JS弹出填写提示效果代码
2011/04/16 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
Python交换变量
2008/09/06 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
python中封包建立过程实例
2021/02/18 Python
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
教师简历自我评价
2014/02/03 职场文书
党员批评与自我批评
2014/02/12 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
财务人员岗位职责
2015/02/03 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
九年级数学教学反思
2016/02/17 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
golang 实现两个结构体复制字段
2021/04/28 Golang
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python