学步园

关于iframe自适应高度的讨论可以先看看口碑UED的博客 http://ued.koubei.com/?p=1217

大概原理见下图:

可以直接看示例：http://lzlu.com/lab/loader/

下面直接上代码了
下面是核心代码loader.js

/**
 
* 跨域iframe自适应高度解决方案
 
* Author: changyin@taobao.com <http://www.lzlu.com>
 
* Copyright (c) 2011, Taobao Inc. All rights reserved.
 
*/
 
var Loader = new function(){
    var doc = document,body = doc.body,
        self = this,
 
        
//获取url中的参数
        getRequest = function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"),
                r = window.location.search.substr(1).match(reg);
            return (r!=null)?  unescape(r[2]) : null;
        },
 
        
//获取配置，script的优先级大于url中的参数
        getConfig = function(){
            var scripts = doc.getElementsByTagName('script'),
                script = scripts[scripts.length - 1];
            return function(param){
                var p = script.getAttribute(param);
                return p? p : getRequest(param);
            };
        }(),
 
        
//代理高度
        proxyheight = 0,
 
        
//top页frame的id
        frameid = getConfig("data-frameid"),
 
        
//监听实时更新高度间隔
        timer = getConfig("data-timer"),
 
        
//获取代理的url
        getProxyuUrl = getConfig("data-proxy"),
 
        
//创建代理的iframe
        proxyframe = function(){
            var el = doc.createElement("iframe");
            el.style.display = "none";
            el.name="proxy";
            return el;
        }();
 
    
//重置高度
    this.resize = function(){
        proxyheight = body.offsetHeight;
        proxyframe.src =  getProxyuUrl + "?data-frameid=" + frameid+ "&data-frameheight=" + (proxyheight+40);
    }
 
    this.init = function(){
        var init = function(){
            body.appendChild(proxyframe);
            self.resize();
            
//是否update
            if(!isNaN(timer)){
                timer = timer<500?500:timer;
                window.setInterval(function(){
                    if(body.offsetHeight != proxyheight){
                        self.resize();
                    }
                },timer);
            };
        };
        if(doc.addEventListener){
            window.addEventListener("load",init,false);
        }else{
            window.attachEvent("onload",init);
        }
        
//如果引入了JS框架,建议将上面一句改掉 例如：KISSY.ready(function(){init();});
    }
};
 
Loader.init();

————————-
代理文件proxy.html

————————-

使用方法：
一、在主页面要包含的iframe中引入loader.js

二、传入参数。有两种传参方法：

1.在主页面引用iframe的时候传参，将参数接在要引用的iframe的url后面
例如：<iframe  id=”testframe”  src=”a.html?data-frameid=testframe&data-auto=200&data-proxy=proxy.html”></iframe>

2.iframe页面包含loader.js的时候传入
例如：<script src=”loader.js” data-frameid = “testframe”  data-timer = “2000″  data-proxy = “proxy.html” ></script>

如果闲麻烦直接按照示例 http://lzlu.com/lab/loader/写就行了，注意proxy.html一定要与最面的页面是同域的。