內容更新後更改iframe的高度

我的頁面上有一些標籤，並且在該頁面的一個標籤內，我有一個iframe (#quiz_iframe)。此iframe是測驗框架，它包含在div (.quiz-div)中。點擊按鈕(.start-quiz)後，測驗已加載，並且內出現新的div (.quiz-content)。在測驗內容中，我有另外20個div (.quiz-question)，它們是分頁的，所以點擊下一個按鈕後，可以隱藏或顯示5個next/prev div。內容更新後更改iframe的高度

嗯，重點是，我想調整iframe的高度，以及我不知道如何，點擊.start-quiz後。

現在我有工作正常代碼，當iframe中加載的第一次（它調整高度的laoded內容）

function iframeLoaded() { 
    var iFrameID = document.getElementById('quiz_iframe'); 
    if(iFrameID) { 
     iFrameID.height = ""; 
     iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px"; 
    }

}

<iframe onload="iframeLoaded()" id="quiz_iframe" src="'.$link.'" style="width:100%;"></iframe>'

我怎麼能修改該代碼，以更新每個.quiz-div高度變化的iframe高度？是的，iframe是在同一個域:)

謝謝！

來源

2014-09-04 zel

可能重複（http://stackoverflow.com/questions/看看9162933/make-iframe-height-dynamic-based-content-inside-jquery-javascript） – 2014-09-04 13:16:23

從腳本調用'iframeLoaded（）'，腳本正在改變'.quiz-div'的內容？ @JamesHill看起來像OP已經閱讀過這篇文章，在接受的答案中的代碼與這裏的問題相同。 – Teemu 2014-09-04 19:24:01

您可以使用基於postMessage的解決方案您必須在iframe和父頁面中包含一些JavaScript。

在你的iframe：

window.addEventListener("load", function() { 
    parent.postMessage(getDocumentHeight(), "*"); 
});

在你父頁面：

function receiveIframeHeight(frameWindow, height) { 
    $("iframe").each(function() { 
     if (this.contentWindow === frameWindow) this.height = height; 
    }); 
}; 
window.addEventListener("message", function (e) { 
    receiveIframeHeight(e.source, e.data); 
});

現在你可以聽在自己的iframe的父頁面resize事件和postMessage的。但要小心無限循環。

要看到整個代碼，你應該在這個Github上回購iframe-autoheight-using-postmessage

的[使基於內 - JQUERY/JavaScript內容iframe高度動態]

來源

2014-09-04 13:23:25 Germain

在jQuery中，你可以使用

$("myContainer .quiz_div").on("resize", function() { 
    $("#quiz_idrame").attr("height", your height calc goes here); 
});

「關於」被委派事件綁定，因此，如果你與類的.quiz_div添加/刪除項目的「myContainer中」，即任何包含的div ，它應該綁定。

來源

2014-09-04 13:18:33

'的jQuery（函數（$）{ \t $（文件）。就緒（函數（）{ \t \t $（「身體.quiz_div」）。在（「調整」，函數（）{ $（「＃quiz_iframe 「）.attr（」高度」，+50）; }）; \t}）;' 做過類似的內頁中#quiz_iframe加載，但不工作可能是我做了什麼錯了？:) – zel 2014-09-04 16:24:51

創建一個jsfiddle，我會看看！ – 2014-09-06 08:04:50

內容更新後更改iframe的高度

回答

相關問題