从 iFrame 内部调用父函数以更改元素高度

Question

我正在构建我的第一个网站，并且我有一个主要元素，它应该延伸到 iFrame 内容的高度。我需要在 NavBox.htm 中单击（也是 iFrame'd 进入索引页面）以在 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

我回答了一个与here 非常相似的问题。你可以使用这个功能：

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