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


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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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
第十四节--命名空间
2006/11/16 PHP
php htmlspecialchars加强版
2010/02/16 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
Python中字典的setdefault()方法教程
2017/02/07 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python数据库小程序源代码
2019/09/15 Python
django model object序列化实例
2020/03/13 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
中专生自我鉴定
2013/12/17 职场文书
我的网上商城创业计划书
2013/12/26 职场文书
个人优缺点总结
2015/02/28 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL
Tomcat弱口令复现及利用
2022/05/06 Servers