javascript - Joomla iFrame 动态高度

Question

我开发了一个小型的 Angular 应用程序，需要在 joomla 网站中使用。为此，我使用 iFrame。然而，iFrame 的高度需要在参数中定义，并且需要在应用程序响应时是动态的。

我已经寻找了两天可能的解决方案。使用谷歌可以找到很多东西，但似乎没有一个解决方案有效。我使用一篇文章添加 iFrame 并添加以下代码:

<p><iframe id="glu" class="wrapper" src="calculator/#/plastic" name="iframe" width="100%" height="150">
    This option will not work correctly. Unfortunately, your browser does not support inline frames.</iframe></p>

为了处理动态高度，可用的解决方案之一是添加以下 JavaScript 代码:

<script language="JavaScript">// <![CDATA[
function resize_iframe()
{

    var height=window.innerWidth;//Firefox
    if (document.body.clientHeight)
    {
        height=document.body.clientHeight;//IE
    }
    //resize the iframe according to the size of the
    //window (all these should be on the same line)
    document.getElementById("glu").style.height=parseInt(height-
    document.getElementById("glu").offsetTop-8)+"px";
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe; 
</script>

似乎所有这些参数都返回相同的错误值:-高度-内部高度-clientHeight-> 这些都返回相同的值，即最初在 iFrame 中定义的高度。

我尝试了很多其他变体，但没有一个起作用。

有人有这方面的工作示例吗？请注意，该问题似乎仅在使用 Joomla/wordpress 等框架时才会持续存在。

我正在考虑的其他选择:- 在文章 javascript 代码中创建 iFrame 元素，并使用应用程序中的 html 代码构建它- 创建一个保存 iframe 应用程序实际高度的服务。 Setter 可以在应用程序本身中定义，因此可以在本文的 iFrame 元素中设置 getter。

有什么好主意/例子吗？

我知道已经有一些与此相关的堆栈溢出问题，但没有一个提供此问题的正确答案。

Answer 1

我相信您走在正确的道路上。它需要 iframe 高度变量的 getter 和 setter。

IMO 我还没有在 Joomla/WP 中使用 iframe 获得有保证的百分比高度解决方案。似乎只有绝对值才适用于所有浏览器。使用以下代码可以评估正在加载的页面的高度值。

为了让 JS 计算 iframe 所需的高度，网页和内容的上边距需要为零。

IFRAME页面

1. 删除页面上边距:设置body标签margin-top:0;内联 CSS。
2. 删除内容上边距: style="margin-top:0;"内联 CSS。
3. 将正文内容放入指定的 div 中:

4. 将 JS 放置在 iframe 页面正文内容的底部，紧邻结束语 </div> 的下方标签:

   <script type="text/javascript">
parent.AdjustIframeHeight(document.getElementById("page-container").scrollHeight);
</script>

带有 IFRAME 代码的页面:

<iframe id="form-iframe" src="iframe1formexample.html" style="margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="no" onload="AdjustIframeHeightOnLoad()"></iframe>

将 src 属性的值更改为 iframe 页面的 URL。 id 和 onload 属性都是必需的。

在 iframe 下方插入 JavaScript:

<script type="text/javascript">
function AdjustIframeHeightOnLoad() { 
document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px";
}
function AdjustIframeHeight(i) { 
document.getElementById("form-iframe").style.height = parseInt(i) + "px";
}
</script>

上一个列表项中的 iframe 标记的 id 值在 JavaScript 中的三个位置指定。如果 iframe 的 id 值“form-iframe”更改，则 JavaScript 中的所有三个位置都必须相应更改。

函数AdjustIframeHeightOnLoad()首次加载 iframe 时调整 iframe 高度。函数AdjustIframeHeight()从 iframe 页面中的 JavaScript 调用时调整 iframe 高度。