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

    最简单的一种方法

    重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!” 

    之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下 

    超简单哦 

    1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦) 

    parent.document.all("框架ID名").style.height=document.body.scrollHeight; 

    parent.document.all("框架ID名").style.width=document.body.scrollWidth; 

    这里的 框架ID名 就是Iframe的ID,比如: 

    <IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME> 

    2、给你网站里所有的被包含文件里面每个都加入 

    <script language = "JavaScript" src = "bottom.js"/></script> 

    3、OK,收工! 

    我在WINXP、IE6下面测试通过。很简单吧! 



    复杂的方法

    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>
  • 相关阅读:
    第三方模块paramiko的使用
    第三方模块paramiko的使用
    第三方模块paramiko的使用
    共识算法的比较:Casper vs Tendermint
    区块链危机!危险的共识算法
    优化的bft共识算法的设计和使用方式
    Obelisk 共识算法设计动机
    信任的 7000 年历史
    【CS231n】斯坦福大学李飞飞视觉识别课程笔记(五):图像分类笔记(下)
    【CS231n】斯坦福大学李飞飞视觉识别课程笔记(四):图像分类笔记(上)
  • 原文地址:https://www.cnblogs.com/goody9807/p/672257.html
Copyright © 2011-2022 走看看