Joomla iFrame动态高度

时间:2015-12-17 21:48:16

标签: javascript html iframe joomla joomla3.0

我开发了一个小角度应用程序,需要在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>

似乎所有这些参数都返回相同的,不正确的值: -高度 -InnerHeight -clientHeight - &GT;这些都返回相同的值,即最初在iFrame中定义的高度。

我尝试了很多其他变种,但都没有。

有没有人有这方面的实例?请注意,使用像Joomla / wordpress等框架时,问题似乎仍然存在。

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

有什么好主意/例子吗?

我知道已经存在一些关于此问题的堆栈溢出问题,但它们都没有为这个问题提供正确答案。

1 个答案:

答案 0 :(得分:1)

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

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

为了让JS计算iframe所需的高度,网页的上边距为&amp;内容需要为零。

IFRAME PAGE

  1. 删除页面上边距:设置body标签margin-top:0;内联CSS。
  2. 删除内容上边距: style =“margin-top:0;”内联CSS。
  3. 将正文内容放入指定的div:
  4. 将JS放置在关闭</div>标记正下方的iframe页面正文内容的底部

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

  5. 包含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中的所有三个位置。

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