使用postMessage跨域iframe resizer

我已閱讀所有跨域iframe帖子（我要感謝你們所有人！）和其他地方。使用postMessage跨域iframe resizer

在Firefox 5及更高版本中，postMessage腳本在cross-domain iframe resizer?處理得非常漂亮。每次在iframe中單擊頁面時，它都會調整iframe的大小。

但它並沒有在我的計算機上的IE（7 8或9）中調整大小。我檢查了安全設置，並檢查IE中是否存在跨域訪問權限。

postMessage在IE中不起作用嗎？ - 或者還有其他需要添加的東西嗎？感謝

2011-09-23 Peter

這是一個從thomax一個偉大的劇本 - 它也適用於這樣你就可以使用iframe的移動 - iPhone和Android

對於IE7和IE8，你必須使用的，而不是window.addEventListener 它window.attachEvent還應該的onMessage，而不是消息（見下文）PS還需要與內容發佈其大小

<script type="text/javascript"> 
if (window.addEventListener) 
{ 
    function resizeCrossDomainIframe(id) { 
    var iframe = document.getElementById(id); 
    window.addEventListener('message', function(event) { 
     var height = parseInt(event.data) + 32; 
     iframe.height = height + "px"; 
    }, false); 
    } 
} 
else if (window.attachEvent) 
{ 
    function resizeCrossDomainIframe(id) { 
    var iframe = document.getElementById(id); 
    window.attachEvent('onmessage', function(event) { 
     var height = parseInt(event.data) + 32; 
     iframe.height = height + "px"; 
    }, false); 
    } 
} 
</script>

來源

2012-05-25 18:47:55 Peter

可以使用本Alman的實施做同樣的服務器上。以下是跨域通信的示例，其中包括iframe調整大小的示例。

http://benalman.com/code/projects/jquery-postmessage/examples/iframe/

根據該文件，它工作在Internet Explorer 6-8，Firefox 3中，Safari瀏覽器3-4，Chrome瀏覽器，Opera 9中

來源

2012-09-10 09:34:55

使用彼得的代碼和here一些想法，你可以從可執行代碼中分離出兼容性，並添加一些跨站點驗證。

<script type="text/javascript"> 
    // Create browser compatible event handler. 
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
    var eventer = window[eventMethod]; 
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 

    // Listen for a message from the iframe. 
    eventer(messageEvent, function(e) { 
    if (e.origin !== 'http://yourdomain.com' || isNaN(e.data)) return; 
    document.getElementById('iframe_id_goes_here').style.height = e.data + 'px'; 
    }, false); 
</script>

此外，爲了完整起見，只要您想觸發調整大小，就可以在iframe中使用以下代碼。

parent.postMessage(document.body.offsetHeight, '*');

來源

2013-08-02 03:22:11 deadbeef404

看了很多不同的解決方案，我最終編寫了一個簡單的jQuery插件來記錄一些不同的用例。由於我需要一個支持門戶頁面上的多個用戶生成的iFrame的解決方案，因此支持的瀏覽器調整大小，並可以應對iFrame之後的主機頁JavaScript加載。我還添加了對寬度和回調函數大小的支持，並允許覆蓋body.margin，因爲您可能希望將此設置爲零。

https://github.com/davidjbradshaw/iframe-resizer

主頁用戶的jQuery，iframe代碼中只是一個小小的自包含JavaScript，因此，它是別人網頁的好客人。

jQuery然後在主機頁面上初始化，並具有以下可用選項。更多關於這些在GitHub頁面上做什麼的細節。

$('iframe').iFrameSizer({ 
    log: false, 
    contentWindowBodyMargin:8, 
    doHeight:true, 
    doWidth:false, 
    enablePublicMethods:false, 
    interval:33, 
    autoResize: true, 
    callback:function(messageData){ 
     $('p#callback').html('<b>Frame ID:</b> ' + messageData.iframe.id + 
          ' <b>Height:</b> ' + messageData.height + 
          ' <b>Width:</b> ' + messageData.width + 
          ' <b>Event type:</b> ' + messageData.type); 
    } 
});

如果設置enablePublicMethods，它可以讓你在iframe手動設置iFrame的大小，甚至從主機頁面刪除iframe的訪問。

來源

2014-02-02 14:53:25

使用postMessage跨域iframe resizer

回答

相關問題