iframe 自动高度在 Firefox 上无法正常工作答案

【问题标题】：iframe auto height doesn't work properly on Firefoxiframe 自动高度在 Firefox 上无法正常工作
【发布时间】：2016-06-16 19:37:06
【问题描述】：

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

但由于某种原因，如果我等待网站完全加载，然后单击主页上的“Wall”标签，则 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);
}

【问题讨论】：

嗨@MarkKang 确保包含iframe 的容器具有overflow-x:hidden 和overflow-y: auto or scroll 我提供的demo 我提供的您已使用Firefox PC 进行了测试您使用的是Mac 吗？顺便说一句，如果为docHeight(x) 正确设置了参数，那么 4 应该以数字形式相加，而不是 concat。
嘿@zer00ne 我还没有完全尝试过你的编码，但我想我会试一试。是的，我是 Mac 用户。
我知道，好吧，而是在 iframe 加载事件上调用函数`resizeIframe`，稍后在window.onload = resizeIframe; 处触发，不要在表达式末尾添加“`()'”。把它放在脚本标签的最后。
我猜它正在工作！谢谢。
欢迎您，先生。我应该回答，因为我花了好几天才弄清楚。

标签： javascript jquery iframe

【解决方案1】：

使用以下代码调整 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>

【讨论】：

我已经尝试过您在这里给我的代码，但仍然没有运气 :( 在我的实时网站上尝试一下：lifeto.cafe24.com/xe 只需等待几秒钟即可完全加载（橙色圆圈消失）然后点击墙标签。
移除 iframe 标签中的 height="100%" ,style="height: 0px;"
如果您没有注意到这一点，那就是 javascript 将 height:0 赋予 iframe。我摆脱了造型的其余部分，但没有运气。你能想到什么解决办法？
你是否正在使用 ajax 加载框架内容？
签出此页面在firefix中工作remotraining.com/schedules.html

【解决方案2】：

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。这只是我的经验观察。

【讨论】：