iframe全跨域高度自適應解決方案

來源:互聯網
上載者:User

看到這個需求的時候就在暗爽,又可以搞定一個知識點了。哈哈,一天的奮鬥之後,果然有所收穫,而且經過懌飛的指點,在跨域問題解決上還有所突破(不通過hash)。
看Demo,相容IE,FF,Safari。

方案說明:

需求是:A頁面(taobao.com)要嵌入B頁面(alibaba.com),因為不能確定B頁面的高度,所以要求高度自適應。

解決方案:簡單來說就是在B頁面裡建立一個和A同域的iframe C,讓C和A之間可以通訊,以把B的高度傳過去。
那麼怎麼傳過去呢?以前的方法是在C裡改變parent.parent(即A)的location.hash,但是改hash會產生瀏覽器記錄,點後退前進按鈕使用者體驗不佳。我們試了下在A頁面直接取frames[ b ].frames[c].location.hash,居然可以取到。
剩下的就簡單了,在A裡設定iframe B裝載完成後擷取C的hash,然後通過hash設定iframe B的高度。

具體代碼:

A頁面:(基於YUI) 複製內容到剪貼簿
代碼:
/**
* 待iframe載入後執行函數
*
* @param {Element} el
* @param {Function} func
*/
var onIframeLoad = function(el, func) {
    var cb = function() {
        try {
            func.call(this);
        } catch (e) {}
    }
    if (TB.bom.isIE) {
        el.onreadystatechange = function(){
            if (el.readyState == 'complete') {
                setTimeout(cb, 0);
                el.onreadystatechange = null;
            }
        }
    } else {
        el.onload = function() {
            setTimeout(cb, 0);
            el.onload = null;
        }
    }
};
/**
* 跨域iframe高度自適應封裝
*
* @param {String} name
*/
var crossDomainIframe = function(name) {
    var iframe = YAHOO.util.Dom.get(name);
    var xclient = 'xclient';
    onIframeLoad(iframe, function(){
        try {
            var h = frames[name].frames[xclient].location.hash.substring(1);
            if (h == '') {
                var func = arguments.callee;
                setTimeout(function(){ func(); }, 20);
                return;
            }
            iframe.style.height = h+'px';
        } catch (e) {}
    });
};
// 執行
crossDomainIframe('frame_content');
B頁面: 複製內容到剪貼簿
代碼:
(function(){
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
function adjust() {
    var h = document.documentElement.scrollHeight || document.body.scrollHeight;
    try {
        if (document.getElementById('xclient')) {
            var divEl = document.getElementById('xclient').parentNode;
            console.log(document.getElementById('xclient').parentNode);
            divEl.parentNode.removeChild(divEl);
        }
        var el = document.createElement('div');
        el.innerHTML = '';
        document.body.appendChild(el);
    } catch(e) {}
}
addLoadEvent(adjust);
})();
C頁面:空頁面,有個檔案避免404發生即可

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。