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


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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
解决vue自定义全局消息框组件问题
Nov 22 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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
MySQL数据源表结构图示
2008/06/05 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
JavaScript中的类继承
2010/11/25 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python抓取文件夹的所有文件
2018/02/27 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Python assert关键字原理及实例解析
2019/12/13 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
解决python 找不到module的问题
2020/02/12 Python
python如何求圆的面积
2020/07/01 Python
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
区域销售经理职责
2013/12/22 职场文书
大课间体育活动方案
2014/03/12 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
大班开学家长寄语
2014/04/04 职场文书
党风廉政建设责任书
2014/04/14 职场文书
一帮一活动总结
2014/05/08 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
高中家长意见怎么写
2015/06/03 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
安全生产协议书
2016/03/22 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
MySQL 查询速度慢的原因
2021/05/25 MySQL