【问题标题】：In firefox, the code in iframe of my website can't be loaded properly, but success to be loaded if the iframe is unhidden and reload the iframe again在Firefox中，我网站的iframe中的代码无法正确加载，但如果iframe未隐藏并重新加载iframe，则加载成功
【发布时间】：2016-04-13 12:31:16
【问题描述】：

希望我的问题足够清楚。我拥有一个网站。 http://khchan.byethost18.com 我的问题出在“日历”选项卡中，它在 chrome 中正常运行，即。但不在 fixfox 中。

我的设计是当我悬停日历选项卡时。将显示日历页面。但在 Firefox 中，当我这样做时，它无法正确显示。开发者工具 show $bookblock.bookblock 不是函数。如果我重新加载框架，则不会显示此类错误消息。

如果我直接加载“http://khchan.byethost18.com/cal.php 它可以正常显示，并且不会出现此类错误消息。

所以我猜可能是某些东西没有正确加载。我已经尝试添加 $(top.document,document).ready({function(){});或将 jquery 库替换为头部或身体。问题依然存在。

因为编码很长。我只写了iframe标签，请尝试使用开发者工具查看我的代码。

我试过document.getElementById('CalF').contentWindow.location.reload(); 如果我已经将日历选项卡悬停，则可以正确重新加载该选项卡。但如果不是，开发者工具会显示相同的错误消息。

所以，我认为问题的主要关键是 jquery 选项卡会影响某些东西，因此选项卡“CalF”无法正常工作。

.boxoff{
  display: none;
  }

<article class='boxoff'> //this article will be hidden until I delete the class.
<iframe id=CalF src="cal.php" style="top: 0;"></iframe>
</article>

谢谢。

【问题讨论】：

您是否记录了任何错误，例如mixed content？
Firefox 只有这些错误/警告信息。不推荐使用 //@ 来指示 sourceMappingURL 杂注。使用 //# 代替 jquery.min.js:1:0 TypeError: getComputedStyle(...) is null // 如果我转到日历选项卡并重新加载 iframe，这个和下一个错误将得到解决。 TypeError: config.$bookBlock.bookblock 不是函数
大家好，现在我使用下面的方法来解决，但我认为这不是一个好方法。当活动选项卡更改时，我检查浏览器是否为 fixfox，活动选项卡是否为日历。如果两者都是，我将重新加载 iframe。
最大的问题之一（除了安全限制）是 iframe 的加载时间通常比任何其他元素都长。如果 iframe 有一个负载繁重的网站，您将需要更多时间才能真正加载它。我会发布一个可能有帮助的解决方案。给我一分钟。

标签： firefox iframe

【解决方案1】：

iframeLoaded()

更新 2

OP 解释说 iframe 最初必须是不可见的。虽然这似乎是不可能的，因为当 iframe 或其祖先元素之一为display: none; 时，iframe 不会加载。关键字是 invisible，这是 iframe 不可见....有想到的三个 CSS 属性，其中一个实际上不应该在这种情况下使用。

display: none; 这是 OP 使用的属性，该属性实际上阻碍了 iframe 的加载。原因是当处于 invisibility 状态时，根据Firefox's behavior，iframe 不在 DOM 中。
opacity: 0; 这个属性也使 iframe 不可见，Firefox 似乎可以很好地识别 invisible iframe。
visibility: hidden;这似乎也是可以接受的......

所以试试我用来抑制FOUC的这段代码：

子页面

function init(sec) {
    var ms = parseFloat(sec * 1000);
    setTimeout('initFadeIn()', ms);
}

function initFadeIn() {
    $("body").css("visibility","visible");
    $("body").fadeIn(500);
 }

HTML

<body style="visibility: hidden;" onload="init(2);">

更新 1

我做了一个替代解决方案，因为我讨厌留下一个不能完全工作的演示★。
好的，这依赖于 cal.php window.onload 事件，这基本上是加载最慢但最稳定的阶段。
最初，#overlay 将在 calF 加载时阻止任何用户交互。
一旦calF完全加载，它将调用位于父页面上的iframeLoaded 函数。
iframeLoaded 将删除 #overlay（我添加了一个 setTimeout 来衡量，但可能没有必要。）

我对PHP语法不是很熟悉，所以你必须修改以下代码✶并将它放在cal.php

window.onload = function() {
    parent.iframeLoaded();
}

然后在父页面上：

function iframeLoaded() {
   setTimeout(function() { 
      $('#overlay').hide(750);
   }, 1500);
}

上面的代码以及所需的 HTML 和 CSS 在下面的 sn-p 中。

★ 注意： sn-p中的代码应该可以工作，但是这个sn-p当然不行，因为有一些代码需要在子页面上。这只是对所有反对者的呐喊 ;-)

片段 1

// iframeLoaded will remove the overlay when cal.php has completely loaded 

function iframeLoaded() {
  setTimeout(function() {
    $('#overlay').hide(750);
  }, 1500); //<========[1 to 2 (1000 - 2000ms) seconds should give you plenty of time]
}


/*~~~~~~~~~~~~~~~~~~~~~~~~[Code in cal.php]~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

// When everything (DOM, script, images. etc...) is loaded on cal.php, call iframeLoaded function that is on the parent's page.

window.onload = function() {
  parent.iframeLoaded();
}

#overlay {
  background: rgba(0, 0, 0, .3);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
#CalF {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="overlay"></div>

<iframe id="CalF" src="http://khchan.byethost18.com/cal.php" height="100%" width="100%" frameborder="0" style="top: 0;"></iframe>

✶函数loadedIframe()灵感来自SO5788723

片段 2

document.getElementById('CalF').onload = function(e) {
  var over = document.getElementById('overlay');
  over.classList.add('hide');
}

#overlay {
  background: rgba(0, 0, 0, .3);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.hide {
  display: none;
}
#CalF {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="overlay"></div>

<iframe id="CalF" src="http://khchan.byethost18.com/cal.php" height="100%" width="100%" frameborder="0" style="top: 0;"></iframe>

【讨论】：

感谢您的努力。一般情况下可能没问题。但它不适用于我的网站。在 Firefox 中，控制台会显示 parent.iframeLoaded() 不是函数。我已经尝试将代码粘贴到 html 的标题或 document.ready 中。问题可能是由于 Jquery 选项卡插件。 iframe“CalF”在文章中。这篇文章开头是“显示：隐藏”。所以文章里面的php代码可能加载不出来。包括 div "#overlay"。
您需要将文章设为 opacity: 0;或可见性：可见；如果 iframe 的任何祖先元素为 display: none，则 iframe 将不会开始加载，直到它位于 DOM 中。显示：无；将元素置于边缘，并被视为根本不存在。
谢谢。如果是这样，我必须放弃使用 iframe，因为我希望页面在开始时不可见。
@KennethChan 我还有一件事要您尝试，我会更新我的帖子 ;-) 顺便说一句，感谢您接受我的回答。 :-)
我喜欢你的布局，太糟糕了。由于您的网页在同一个域中，您可以使用 AJAX。

【解决方案2】：

$(document).ready 似乎调用得太早了，基于父页面而不是 iframe 内容。

这里有类似问题的解决方案： jQuery .ready in a dynamically inserted iframe

【讨论】：

谢谢。我看到了链接。但我认为这个问题与太快调用无关。我将我的新发现编辑到了帖子中。如果 iframe（文章）的父级不可见，则 iframe 中的编码无法正确加载。