从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定义元素高度的样式即可。