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


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限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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 header()函数使用说明
2008/07/10 PHP
Cakephp 执行主要流程
2010/03/24 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php实现微信支付之企业付款
2018/05/30 PHP
Convert Seconds To Hours
2007/06/16 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
python opencv摄像头的简单应用
2019/06/06 Python
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
家长会邀请书
2014/01/25 职场文书
小学生自我评价范文
2014/01/25 职场文书
银行进社区活动总结
2014/07/07 职场文书
清洁工个人总结
2015/03/04 职场文书
2016年教师节感言
2015/12/09 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js