Joomla iFrame 动态高度

Question

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

我这两天一直在寻找可能的解决方案。使用 google、 可以找到很多解决方案，但 none 的解决方案似乎有效。 我正在使用一篇文章添加 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>

似乎所有这些参数 return 都是相同的错误值： -高度 -内高 -客户端高度 -> 这些都是 return 相同的值，即最初在 iFrame 中定义的高度。

我已经尝试了很多其他变体，但 none 都有效。

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

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

有什么好的想法/例子吗？

我知道已经有一些关于此的堆栈溢出问题，但其中 none 提供了此问题的正确答案。

Answer 1

我相信你是在正确的轨道上。它需要 iframe 高度变量的 getter 和 setter。

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

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

IFRAME 页面

去除页面上边距：设置body标签margin-top:0;内联 CSS.
删除内容上边距： style="margin-top:0;" inline CSS.
将正文内容命名为 div:
将 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的高度。当从 iframe 页面中的 JavaScript 调用时，函数 AdjustIframeHeight() 调整 iframe 高度。

Joomla iFrame 动态高度

Joomla iFrame dynamic height

javascript

html

iframe

joomla

joomla3.0