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


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 入门级学习笔记及源码
Jan 22 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
JavaScript代码简化技巧实例解析
Sep 09 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(5) 类和对象
2010/02/16 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
js查找父节点的简单方法
2008/06/28 Javascript
百度留言本js 大家可以参考下
2009/10/13 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
python中map()函数的使用方法示例
2017/09/29 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
大学生创业项目方案
2014/03/08 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL