zoukankan      html  css  js  c++  java
  • 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 高度变化时页面跳动的太厉害,在调用的时候可酌情使用这个设置。

  • 相关阅读:
    python--HTTPClient接口测试踩坑
    python打印cookies获取cookie
    BeanShell使用json.jar包处理Json数据
    禁用缓存的过滤器Filter
    过滤器Filter(拦截jsp页面的跳转)案例:
    MVC模式:实现数据库中数据的增删改查功能
    JSTL.带标签体的标签,方法和例子
    javaBean的使用方法;
    JSTL,自定义一个标签的功能案例
    利用Session实现一次验证码
  • 原文地址:https://www.cnblogs.com/jamin/p/1233197.html
Copyright © 2011-2022 走看看