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


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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
jQuery操作css样式
May 15 jQuery
iscroll动态加载数据完美解决方法
Jul 18 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
详解JavaScript 异步编程
Jul 13 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP生成Flash动画的实现代码
2010/03/12 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
CI框架表单验证实例详解
2016/11/21 PHP
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
AngularJS基础知识
2014/12/21 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python openpyxl使用方法详解
2019/07/18 Python
python的常见矩阵运算(小结)
2019/08/07 Python
Python中函数的返回值示例浅析
2019/08/28 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
美术专业自荐信
2014/07/07 职场文书
群众路线个人整改方案
2014/10/25 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android