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


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 相关文章推荐
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 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
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
客服部班长工作责任制
2014/02/25 职场文书
仓库管理计划书
2014/05/04 职场文书
安全生产大检查方案
2014/05/07 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL