zoukankan      html  css  js  c++  java
  • JavaScript实现Iframe自适应其加载的内容高度

    在使用IFrame的时候经常出现内容高度不符影响页面整体效果,利用JavaScript可以实现Iframe自适应其加载的内容高度.

    //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>
    <iframe src="child.htm"></iframe>
    </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()
    {
    var ex;
    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;
    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 
    = h +"px";
    }

    }

    }

    }

    catch (ex){}
    }

    if(document.attachEvent)
    {
    window.attachEvent(
    "onload", iframeAutoFit);
    window.attachEvent(
    "onresize", iframeAutoFit);
    }

    else
    {
    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>
  • 相关阅读:
    bzoj 1196: [HNOI2006]公路修建问题 二分+并查集
    bzoj 1607: [Usaco2008 Dec]Patting Heads 轻拍牛头 筛法
    bzoj 1050: [HAOI2006]旅行comf 并查集
    bzoj 1040: [ZJOI2008]骑士 树形dp
    bzoj 1295: [SCOI2009]最长距离
    bzoj 1070: [SCOI2007]修车 费用流
    bzoj 1057: [ZJOI2007]棋盘制作 单调栈
    bzoj 1059: [ZJOI2007]矩阵游戏 二分图匹配
    sass/scss 和 less的区别
    IONIC实现图片轮播
  • 原文地址:https://www.cnblogs.com/zwei1121/p/900275.html
Copyright © 2011-2022 走看看