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>
  • 相关阅读:
    07-图5 Saving James Bond
    07-图4 哈利·波特的考试(25 分)多源最短路,邻接矩阵
    最短路径问题
    最小生成树
    06-图3 六度空间(30 分)
    06-图2 Saving James Bond
    06-图1 列出连通集(25 分)邻接矩阵

    05-树9 Huffman Codes(30 分)
    集合及运算
  • 原文地址:https://www.cnblogs.com/zwei1121/p/900275.html
Copyright © 2011-2022 走看看