解决跨域iframe自适应高度（转自：http://www.lzlu.com/blog/?p=692）-优快云博客

本文介绍了一种跨域iframe自适应高度的解决方案，通过在主页面引入loader.js并配置参数，实现实时调整iframe高度，避免了因内容变化导致的高度溢出或空白问题。

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

大概原理见下图:

下面直接上代码了
下面是核心代码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

        <!DOCTYPE html>
       
        <
        html
        > 
       
        <
        head
        > 
       
        <
        title
        >proxy</
        title
        > 
       
        <
        meta 
        http-equiv
        =
        "Content-Type" 
        content
        =
        "text/html; charset=utf-8"
        ></
        head
        > 
       
        <
        body
        > 
       
        <
        script
        > 
       
        (function() {
       
        var getRequest = function(name) { 
       
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"), 
       
        r = window.location.search.substr(1).match(reg); 
       
        return (r!=null)? unescape(r[2]) : null; 
       
        }, 
       
        height = getRequest("data-frameheight"); 
       
        try { 
       
        var el = window.top.document.getElementById(getRequest("data-frameid")); 
       
        if (!el) return; 
       
        el.style.height = height + 'px'; 
       
        } 
       
        catch (e) { 
       
        //console.log(e); 
       
        } 
       
        })();
       
        </
        script
        > 
       
        </
        body
        > 
       
        </
        html
        >