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


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 相关文章推荐
URL地址中的#符号使用说明
Feb 12 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 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
重新认识php array_merge函数
2014/08/31 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
Python聊天室实例程序分享
2016/01/05 Python
python实现发送邮件功能
2017/07/22 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
Prototype如何更新局部页面
2013/03/03 面试题
中专生职业生涯规划书范文
2013/12/29 职场文书
2016年情人节广告语
2016/01/28 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
Python序列化模块JSON与Pickle
2022/06/05 Python