從iFrame內部調用父函數以更改元素高度

Question

我正在建立我的第一個網站，並且有一個主要元素應該擴展到iFrame內容的高度。 我需要單擊NavBox.htm（也在iFrame中進入“索引”頁面）以在Index.htm的主iFrame中顯示SubFolder / SubPage.htm（主要是純文本），並在Index.htm中調用一個函數來更改元素的高度取決於子頁面的長度。

當調用一個較長的頁面時它可以工作，但是如果調用一個較短的頁面，它實際上會按照我添加的填充大小（20px）增長（如果我取下了填充，則大小保持不變）。 我很確定這是我的語法中的一個簡單錯誤，但是我無法使用元素內的新頁面來重新計算高度。

在Index.htm上，我具有以下用於更改元素高度的函數：

function frm_onload(frmname) {
    frmname.frameElement.height = frmname.document.body.scrollHeight+20;
}

再往下是實際的iFrame調用：

<iframe id="Center" width=98%; LANGUAGE=javascript ONLOAD="return frm_onload(Center)" marginwidth="0" marginheight="0" frameborder="0" ></iframe>

在NavBox.htm子頁面上，我有一個更改元素內容的鏈接：

<a href="SubFolder/SubPage.htm" target="Center" onclick="document.getElementById('Center').src=SubFolder/SubPage">SubPage</a>

因此，如果我一直在思考，則可能是函數無法理解某些內容，或者需要NavBox中的鏈接來執行更多操作。 非常感謝你們提供的任何幫助！

Answer 1

我在這里回答了一個與此問題非常相似的問題。 您可以使用此功能：

function addCSSToParent(url) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    link.type = 'text/css';
    window.parent.document.getElementsByTagName('head')[0].appendChild(link);
}

// Add some CSS
addCSSToParent('some.css');

它將允許您附加.css文件以設置父級樣式。 您可以使用$(window.parent.document)在jQuery中的iframe中訪問父文檔。 因此，您只需要向父級添加一個css文件，或使用jQuery定義元素高度的樣式即可。