如何在新頁面加載時調整模式iframe的大小？

Question

我想要在模態iframe中顯示幾個鏈接頁面。 頁面大小不同，我希望能夠在加載每個新頁面時調整iframe的大小。 我已經查看了幾個jquery插件來創建iframe，但無法弄清楚如何調整其中任何一個。 我目前正在嘗試使用prettyPhoto和nyroModal，但我願意接受建議。 我只需要讓它工作。 我也不是很擅長JavaScript，但我正在努力學習。

注意：我的所有頁面都在我的Web服務器上，因此跨域沒有問題。

感謝所有快速回復。 我要去睡覺了，但是當我醒來的時候，我期待着嘗試你的建議。

Answer 1

嘗試將其放在iframe中：

document.onload = function() {
    var i = parent.document.getElementById('myIframe');
    i.style.width = document.body.offsetWidth+"px";
    i.style.height = document.body.offsetHeight+"px";
}

Answer 2

將頁面加載到iframe時，您可能會遇到跨域問題。 從父級JS訪問iframe中的頁面被阻止。

如果您想輕松完成 - 跟蹤代碼中iframe的內容並手動調整為硬編碼尺寸。

創建要用於每個頁面的維度數組並使用此函數：

function() {
    var i = document.getElementById('myIframe');
    var sr=i.src;
    i.style.width = myDimensionsArray[sr][w]+"px";
    i.style.height = myDimensionsArray[sr][h]+"px";
}

Answer 3

你可以使用postMessage。 在你的iframe中寫這個：

document.body.onload=function(){
  parent.postMessage("resize_me", "*");
}

在您的主頁面中：

 window.addEventListener("message", function(e){ if(e.data=="resize_me") { //resize the iframe } } 

Answer 4

這里有2個案例：

1. 在模態打開后加載iframe

2. 在模態打開之前加載iframe

   function resizeIframe(obj){ obj.style.height = 0; obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } $(".modal").on('shown.bs.modal', function () { resizeIframe(document.getElementById(IFRAME_ID)); }); window.onload=function(){ document.getElementById('IFRAME_ID').addEventListener('load', function(){ resizeIframe(document.getElementById(IFRAME_ID)); }); }

的情況下

1. 加載iframe后，iframe將調整大小
2. 加載iframe時，由於模態是不可見的，因此不會調整大小，因此需要再次調整模型的大小。