zoukankan      html  css  js  c++  java
  • iframe跨域高度自适应的实现

    兼容ie和ff, chrome

    主框架代码

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    </head>
    <body>
    支持跨域的框架高度自适应
    <hr>
    <iframe id="autoFrame" name="autoFrame" src="http://u.com/frame.html"
    width="100%" height="0" scrolling="auto" onload="frameResize()" frameborder="0"></iframe>
    <hr>
    <script language='javascript'>
    function frameResize() {
    var frameName = 'autoFrame';
    if(typeof(h) == 'undefined') {
       h = 0;
    }
    if(h > 0) {
       document.getElementById(frameName).style.height = h + 'px';
    } else {
       try
       {
        h = window.frames[frameName].frames['xclient'].location.hash.substring(1);
       }
       catch (e)
       {
       }
       setTimeout(frameResize, 1);
    }
    }
    </script>

    </body>
    </html>

    子域的框架代码

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <script type="text/javascript">
    function ForResize()
    {
    var h = document.documentElement.scrollHeight || document.body.scrollHeight;
    if (document.getElementById('xclient'))
    {
        var divEl = document.getElementById('xclient').parentNode;
        divEl.parentNode.removeChild(divEl);
    }
    var el = document.createElement('div');
    el.innerHTML = '<iframe src="http://u.com/xclient.html# + h + '" name="xclient" id="xclient" width="0" height="0" style="display:none;"></iframe>';
    document.body.appendChild(el);
    }
    </script>
    </head>
    <body onload="ForResize()">

    这里是框架的内容, 自适应这里的高度, 支持跨域
    <br>
    asdfsdf<br>asdfsdf<br>asdfsdf<br>asdfsdf<br>
    asdfsdf<br>asdfsdf<br>asdfsdf<br>asdfsdf
    <br>asdfsdf<br>
    asdfsdf<br>
    asdfsdf
    <br>
    asdfsdf山高水低个的
    </body>
    </html>

    同时在当前域的根目录增加xclient.html文件,内容为空即可, 避免返回404错误

  • 相关阅读:
    linux系统禁止root用户通过ssh登录及ssh的访问控制
    POJ 3670 , 3671 LIS
    hello world是怎样运行的?
    MFC框架中消失的WinMain()
    [置顶] android LBS的研究与分享(附PPT)
    POJ 3616 DP
    IMP 导入数据报错 OCI-21500 OCI-22275
    误删/tmp导致hadoop无法启停, jsp无法查看的解决方法
    java的文件操作类File
    C#的可空类型与不可空类型
  • 原文地址:https://www.cnblogs.com/glacierh/p/1696106.html
Copyright © 2011-2022 走看看