Question

我正在尝试在我的购物车软件（Opencart）中嵌入一个论坛，因为我相信这将有助于使网站更具社交性，我目前所知道的唯一方法是使用带有iFrame的自定义页面展示论坛。

网站首页为https://heroesofgc.com/index.php?route=common/home，iFrame目前位于https://heroesofgc.com/forum2（由于错误，菜单中尚未关联）。

我在这个网站上浏览了很多选项，但是所有这些选项我都遇到了一些非常奇怪的iFrame行为。 iFrame在调整大小和不调整大小之间波动，它会在几个小时内正确调整大小，然后再过几个小时就会拒绝调整大小。这不是我在Safari，Firefox，Chrome，Edge和Internet资源管理器上尝试的任何浏览器所特有的 - 虽然其中一些调整大小，但其中一些不会，但几个小时后，那些没有调整大小的浏览器调整大小，反之亦然。它没有显示出明显的模式，它只是有时有效，有时却没有。

以下是我目前正在做的事情：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

看起来好像在页面加载时无法找到该元素。

尝试放置

handleChange:function(event){
    this.setState({selected: !this.state.selected}); //look at the !NOT sign

}

在页面的末尾，以便在调用之前存在iFrame ID。

Answer 2

有点奇怪地回答我自己的问题，但我设法找到了解决方案，所以我会在这里发布结果。

我找到了一个适用于以下页面的响应式iFrame： https://github.com/davidjbradshaw/iframe-resizer

当我在一个PHPbb3论坛上使用Opencart时（至少对我而言）有点难以找到正确的文件进行编辑，经过一些小小的摆弄后我设法让它运行起来。请注意，这些说明分别针对Opencart和PHPBB3，对于更高级的用户而言可能被视为多余。

这是你做的： 1）在上面的页面下载zip文件并解压缩 2）使用FTP上传'openrame / catalog / view / javascript文件夹中的'iframeResizer.min.js'和'iframeResizer.map'（.map文件可能不是必需的，但这就是我所做的）。 3）使用Ftp将'iframeResizer.contentWindow.min.js'和'iframeResizer.contentWindow.map'文件上传到PHPbb3安装中的文件夹（我将其放在我的样式/模板文件夹中）。

4）在Opencart的安装中，编辑catalog / controller / common文件夹中的'header.php'文件。添加以下代码（我在'$ this-＆gt; data ['base'] = $ server;'line：

之前添加了我的代码

$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结构并根据自己的喜好进行调整。

使iFrame响应其内容的高度（PHPBB）

2 个答案: