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


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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
vue如何实现自定义底部菜单栏
Jul 01 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
微信小程序页面渲染实现方法
Nov 06 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
python妙用之编码的转换详解
2017/04/21 Python
详解python中asyncio模块
2018/03/03 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
致运动员赞词
2015/07/22 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
对象析构函数__del__在Python中何时使用
2022/03/22 Python
Python+DeOldify实现老照片上色功能
2022/06/21 Python