• 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>
            
    <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, d=document, dd=d.documentElement;
                            a[i].parentNode.style.height 
    = a[i].offsetHeight +"px";
                            a[i].style.height 
    = "10px";

                            
    if(dd && dd.scrollHeight) h1=dd.scrollHeight;
                            
    if(d.body) h2=d.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  自适应其加载的网页(多浏览器兼容:IE5.5+、Mozilla、Firefox、Opera、Netscape7.2+、Safari3等,支持XHTML)</td>
            
    </tr>
        
    </table>
    </body>  
    </html>

      很多人反应在IE7里使用它会死机,那是因为在自适应高度时触发了 window.onresize 事件,而这个事件又去调用这个调整 <iframe> 高度的函数,产生了死循环调用。

      这段代码里我对 iframe 所在的父元素也设定了一个高度,以防止iframe 高度变化时页面跳动的太厉害,在调用的时候可酌情使用这个设置。

  • 相关阅读:
    java server: all kinds of errors
    fragment使用的错误
    unity3d+vuforia开发增强现实例子编译
    android遇到的几个问题
    cocos2dx 特效
    cchttpclient中停止网络请求的方法
    cocos2dx 2.2.5 hitWidget->onTouchEnded(pTouch, pEvent); 异常
    将博客搬至CSDN
    ffmpeg 编译Android
    常用注解
  • 原文地址:https://www.cnblogs.com/jamin/p/1233197.html
Copyright © 2020-2023  润新知