iframe Auto Height在Firefox上无法正常工作

iframe auto height doesn't work properly on Firefox

本文关键字：常工作 工作 Height Auto Firefox iframe      更新时间：2023-09-26

我一直在寻找一种根据 iframe 内的内容自动调整高度的解决方案，这似乎适用于 chrome。

但是由于某种原因，如果我等待网站完全加载，然后单击主页上的"墙"选项卡，则iframe内容不可见，因为高度设置为" 4px"。

同样，如果您在加载时或在加载之前单击墙壁选项卡，它工作得很好。

我猜这与来源有关。我遇到问题的网站在这里：http://xefrontier.com/

谁能告诉我为什么会发生这种现象？

这是来源：

  function resizeIframe(obj){
 obj.style.height = 0;
 obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
 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 iframe_board = document.getElementById(id);
var doc = iframe_board.contentDocument? iframe_board.contentDocument: 
    iframe_board.contentWindow.document;
iframe_board.style.visibility = 'hidden';
iframe_board.style.height = "10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
iframe_board.style.height = getDocHeight( doc ) + 4 + "px";
iframe_board.style.visibility = 'visible';
}
document.getElementById('iframe_board').onload = function() { // Adjust the Id accordingly
setIframeHeight(this.id);
}

OP 问题的解决方案如下：

  • 与iframe交互的功能在Chrome中有效，但在Firefox中不起作用。
    • 停止 如果 Firefox 出现问题，Chrome 可以与 iframe 交互，请考虑这是否发生在 PC、Mac 或两者中。
    • 很有可能它会是Mac，它与Firefox的关系很好（注意：讽刺不能在键盘上很好地表达）。

  • 如果问题与运行Firefox的Mac有关，则可以执行以下操作来修复88.4%的时间。

    1. 在 iframe 上找到侦听 load 事件的任何事件处理程序：

      • 前任。 <iframe src="domain.com" onload="eventHandler()"></iframe>

        删除================^

        -------====THIS===------^。

    2. 禁用/删除它们。

    3. 在</script>块的最后添加以下内容：

      前任。 window.onload = eventHandler;

    注意 ====

    • ================^=^ -不要在函数末尾添加()

Firefox Mac有许多不同的问题，有些是设计使然。其中一个错误是它无法在加载后确认iframe的存在。Firefox Mac将在加载其他所有内容后处理iframe。这只是我根据经验的观察。

使用以下代码调整 iframe 高度的大小

 <script language="javascript" type="text/javascript">
 function resizeIframe(obj) {
  obj.style.height = (obj.contentWindow.document.body.scrollHeight) + 'px';
}
</script>

和在 iframe 标签中

  <iframe src="somepage.php" width="100%" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>
相关文章：