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高度。