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

Call a parent function from inside an iFrame to change Element height

本文关键字：元素 高度 函数 iFrame 内部 调用      更新时间：2023-09-26

我正在构建我的第一个网站，我有一个主要元素，它应该延伸到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中的链接来做更多的事情。非常感谢你们能提供的任何帮助！

我在这里回答了一个与此问题非常相似的问题。您可以使用此功能：

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

相关文章：