iFrame 跨域高度自适应问题解决

需求是：A页面(例如：www.taobao.com) 要嵌入B(例如： www.alibaba.com)，因为不能确定B页面的高度，所以要求高度自适应。

具体代码：

iframe主页面 A.html

<div>

src="www.alibaba.com/B.html" runat="server"></iframe>

</div>

cross.js --cross放到父页面的域名下

www.taobao.com.cn/qiantao

";------------

要修改的A页面服务器地址

(可以是测试地址,或者是如果正式测试的都一样，则else可不要)
    }
}
inner = {
    iframe_el: null,
    url: 'http://' + mathor_url,
    aid: 1,
    href: null,
    time: null,
    signA: false,
    autoHeight: true,
    getDocHeight: function () {
        var height = (navigator.appName == "Microsoft Internet Explorer") ? document.body.scrollHeight + 20 : document.body.offsetHeight + 20;
        return height;
    },
    postAction: function (u) {
        var fd = this; clearInterval(this.time);
        fd.iframe_el_new = document.createElement('iframe');
        fd.iframe_el_new.height = 0;
        fd.iframe_el_new.style.height = '0px';
        fd.iframe_el_new.style.width = '0px';
        fd.iframe_el_new.style.border = 'none';
        fd.iframe_el_new.width = 0;
        fd.iframe_el_new.frameborder = 0;
        fd.iframe_el_new.border = 0;
        fd.iframe_el_new.scrolling = 'no';
        fd.iframe_el_new.src = fd.url + "/proxy.htm#aid=" + this.aid + "&" + u;
        fd.iframe_el.parentNode.appendChild(fd.iframe_el_new);
        fd.iframe_el.parentNode.removeChild(fd.iframe_el);
        fd.iframe_el = fd.iframe_el_new;
        this.aid++;
    },
    setHeight: function (height) {
        if (height === undefined) {
            height = this.getDocHeight();
        }
        this.postAction("action=setheight&height=" + height);
    },
    start: function () {
        var fd = this;
        fd.iframe_el = document.getElementById("aFrame"); -----更改ifram的名称
        if (this.autoHeight) {
            fd.old_height = 0;
            var autoHeight = function () {
                if (fd.old_height != inner.getDocHeight()) {
                    fd.old_height = inner.getDocHeight();
                    fd.setHeight();
                }
            }
            setInterval(autoHeight, 200);
        }
    }
};

document.write('<iframe id="aFrame" style="width:0; height:0; border:none;" frameborder="0" scrolling="no" src="' + inner.url + '/proxy.htm#aid=0&action=setheight&height=' + inner.getDocHeight() + '"></iframe>');-----此处也要进行修改，拼接proxy.htm的位置，注意proxy.htm存放的位置
inner.start();
(function () {if (!!window.ActiveXObject && !window.XMLHttpRequest) {
        var links = document.getElementsByTagName('a');
        for (i = links.length - 1; i >= 0; i--) {
            var clink = links[i];
            if (clink.target == "_top") {
                clink.onclick = (function () {
                    var chref = clink.href;
                    return function () {
                        if (window.top) {
                            window.top.location = chref;
                        }
                    }
                })()
            }
        }
    }

})()

proxy.htm （代理页） --代理页面放到父页面的域名下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
    <title></title>
</head>
<body>
<script type="text/javascript">
    var old_aid = null;
    var action = function () {
        try {
            if (window.location.href.indexOf("#") == -1) return;
            var aid = window.location.href.match(/(#|&)aid=(.*?)(&|$)/ig)[0].match(/[0-9]+/)[0];
            var height = window.location.href.match(/(#|&)height=(.*?)(&|$)/ig)[0].match(/[0-9]+/)[0];
            if (aid == null) return;
            old_aid = aid;
            if (-[1, ]) {
                height = parseInt(height) + 20;
            }
            window.parent.parent.document.getElementById("aFrame").style.height = height + "px";
        } catch (e) { }
    };
    action();
</script>
</body>
</html>

最后将自适应的页面www.alibaba.com/B.html中添加引用cross.js脚本(放到</body>之前)

posted on 2011-05-19 14:54 sansan- 阅读(1747) 评论(2) 编辑收藏举报