Joomla iFrame动态高度

Question

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

我一直在搜索两天，以寻求可能的解决方案。 使用google可以找到很多东西， 但是这些解决方案似乎都不起作用。 我正在使用文章添加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>

似乎所有这些参数都返回相同的，错误的值：-Height -InnerHeight -clientHeight->这些都返回相同的值，这是iFrame中最初定义的高度。

我尝试了很多其他变体，但都没有用。

有人有可行的例子吗？ 请注意，仅在使用Joomla / wordpress之类的框架时，问题似乎仍然存在。

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

有什么好主意/示例吗？

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

Answer 1

我相信您的方向正确。 这将需要iframe高度变量的获取器和设置器。

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

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

框架页面

1. 删除页面顶部空白：设置正文标签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>

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

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