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


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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
使用JavaScript库还是自己写代码?
Jan 28 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python 转义字符详细介绍
2017/03/21 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
python aiohttp的使用详解
2019/06/20 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
python修改字典键(key)的方法
2019/08/05 Python
python如何把字符串类型list转换成list
2020/02/18 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
小学教师的自我评价范例
2013/10/31 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
农民致富事迹材料
2014/01/23 职场文书
我爱读书演讲稿
2014/05/07 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
企业百日安全活动总结
2015/05/07 职场文书
刑事辩护词范文
2015/05/21 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android