我开发了一个需要在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>
似乎所有这些参数都返回了相同的、不正确的值:-高度-内部高度-客户端高度->这些都返回相同的值,即最初在iFrame中定义的高度。
我尝试了很多其他的变体,但都不起作用。
有人有这样的例子吗?请注意,这个问题似乎只有在使用Joomla/wordpress这样的框架时才会持续存在。。
我正在考虑的其他选择:-在文章javascript代码中创建一个iFrame元素,并使用应用程序中的html代码构建它-创建一个保持iframe应用程序实际高度的服务。Setter可以在应用程序本身中定义,因此可以在文章中的iFrame元素中设置getter。
有什么好主意/好例子吗?
我知道已经有一些关于堆栈溢出的问题,但没有一个能提供这个问题的正确答案。
我相信你走在了正确的道路上。它需要一个iframe高度变量的getter和setter。
IMO我还没有在Joomla/WP中使用iframes获得保证的百分比高度解决方案。似乎只有一个绝对值适用于所有浏览器。使用以下代码可以评估正在加载的页面的高度值。
对于JS计算iframe所需的高度,网页的上边距&内容必须为零。
IFRAME页面
- 删除页首边距:设置正文标记页首边距为0;内联CSS
- 删除内容顶部边距:style="margin-top:0;"内联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的高度。函数AdjustIframeHeight()
在从iframe页面中的JavaScript调用时调整iframe高度。