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


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 相关文章推荐
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
js实现分割上传大文件
Mar 09 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
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
德生1994机评
2021/03/02 无线电
ecshop实现smtp发送邮件
2015/02/03 PHP
分享PHP守护进程类
2015/12/30 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
zbar解码二维码和条形码示例
2014/02/07 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python中static相关知识小结
2018/01/02 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
大课间活动制度
2014/01/18 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
关于元旦的广播稿
2014/02/16 职场文书
十佳护士获奖感言
2014/02/18 职场文书
超市促销活动总结
2014/07/01 职场文书
咖啡店创业计划书
2014/08/15 职场文书
先进个人材料怎么写
2014/12/30 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
学术会议开幕词
2016/03/03 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
python开发的自动化运维工具ansible详解
2021/08/07 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
Mysql开启外网访问
2022/05/15 MySQL