使iFrame響應其內容的高度（PHPBB）

Question

我正在嘗試將論壇嵌入我的購物車軟件（Opencart）中，因為我認為這將大大有助於使網站更具社交性，而我目前唯一了解的實現此目的的方法是使用帶有iFrame的自定義頁面來顯示論壇。

網站主頁為https://heroesofgc.com/index.php?route=common/home ，而iFrame當前位於https://heroesofgc.com/forum2上 （由於錯誤，菜單中未鏈接）。

我瀏覽了此站點上的許多選項，但是在所有這些選項中，iFrame都遇到了一些非常奇怪的行為。 iFrame會在調整大小和不調整大小之間波動，它將在幾個小時內正確調整大小，然后在另外幾個小時內只是拒絕調整大小。 正如我在Safari，Firefox，Chrome，Edge和Internet Explorer上嘗試過的那樣，這並非特定於任何瀏覽器-雖然其中一些調整了大小，但有些沒有，但是幾個小時后沒有調整大小的是調整大小，反之亦然。 它沒有顯示出明顯的模式，只是有時有效，有時則無效。

這是我當前正在執行的操作：1）我正在使用PHPBB 2）在我正在使用的opencart主題的“ header.tpl”中，添加了以下代碼：

<script type="text/javascript">
function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/1145850/
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
    setIframeHeight(this.id);
}
</script>

3）然后在頁面上，我正在使用以下iFrame代碼：

<iframe frameborder="0" id="ifrm" onload="setIframeHeight(this.id)" src="https://www.heroesofgc.com/forum/viewtopic.php?f=2&amp;t=1" width="100%">

有誰知道這種奇怪行為的原因，或者更好的解決方法？

對於其他小型企業（包括我自己）而言，使用可靠且兼容的iFrame的能力可能是一項重要資產，因為替代方案需要大量的時間和金錢投資。

Answer 1

看起來在頁面加載時找不到該元素。

嘗試放置

document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
    setIframeHeight(this.id);
}

位於頁面末尾，以便在調用iFrame ID之前將其存在。

Answer 2

有點奇怪地回答了我自己的問題，但是我設法找到了解決方案，所以我將結果發布在這里。

我找到了可在以下頁面上使用的自適應iFrame： https ： //github.com/davidjbradshaw/iframe-resizer

當我在PHPbb3論壇上使用Opencart時（至少對我而言）很難找到正確的文件進行編輯，經過一番擺弄之后，我設法使其正常工作。 請注意，這些說明分別特定於Opencart和PHPBB3，對於更高級的用戶可能被認為是多余的。

您的操作如下：1）在上述頁面上下載zip文件並解壓縮2）使用FTP上傳“ iframeResizer.min.js”和“ iframeResizer.map”（可能不需要.map文件，但這是我所做的）到您的opencart / catalog / view / javascript文件夾。 3）使用Ftp將“ iframeResizer.contentWindow.min.js”和“ iframeResizer.contentWindow.map”文件上傳到PHPbb3安裝目錄中（我將其放置在樣式的/ template文件夾中）。

4）在Opencart的安裝中，編輯catalog / controller / common文件夾中的“ header.php”文件。 添加以下代碼（我在'$ this-> data ['base'] = $ server;'行之前添加了我的代碼：

$this->document->addScript('catalog/view/javascript/iframeResizer.min.js');

5）在PHPBB的安裝中，在所使用樣式的模板文件夾內找到“ overal_header”文件。 在后面添加以下代碼：

<script src="path-to-your-content-window-resizer/iframeResizer.contentWindow.min.js"></script>

這樣，您基本上就可以在opencart的任何頁面上使用iFrame來顯示您的論壇頁面和內容。 使用上一頁中提供的iFrame結構，並根據自己的喜好進行調整。