iframe 有时在 Firefox 中不起作用答案

【问题标题】：Iframe is not working sometimes in Firefoxiframe 有时在 Firefox 中不起作用
【发布时间】：2019-01-09 18:00:40
【问题描述】：

我有一个带有style="display:none" 属性的iframe。它在 chrome 中一直运行良好，但有时会在 Firefox 中引起问题。没有 iframe 页面在 Firefox 中显示，它是完全随机的。

这是我在angularjs 中的函数，它通过单击按钮来调用。

$scope.onAddGuarantorClicked = function() {
    if($("#frmGuarantor").length > 0) {
        $("#frmGuarantor" ).remove();
    }               

    $("#loadingIframe").show(); 

    var html="<div><iframe id='frmGuarantor' src='https://someUrl' width='100%' height='100%' onload='renderDone();' frameborder='0' style='display:none'></iframe></div>";               
    $("#dvAddGuarantor").append(html);
    $("#dvAddGuarantor").css("min-height", $("#dvSummary").height());
    $("#frmGuarantor").height($("#dvSummary").height() - 60);
    $("#frmGuarantor").attr("src","aDemoPage?id="+$scope.applicationId);
    $("#dvSummary").hide('slow');
    $("#dvAddGuarantor").show('slow');
};

还有

window.renderDone = function(){
  var d = new Date(); // for now
  console.log('renderDone called outside at: H:'+ d.getHours()+' M:'+d.getMinutes()+' S:'+ d.getSeconds());

  $("#frmGuarantor").show();
  $("#loadingIframe").hide();              
};

在控制台窗口中，我发现iframe 不起作用时出现警告。它说：

jQuery.Deferred 异常：divStyle 为 null computeStyleTests@...

Here 是完整的警告信息。

然后我搜索了这个问题，发现 this 错误。

有什么方法可以让 iframe 在 Firefox 中与 display:none 一起工作？

【问题讨论】：

No iframe page is shown in firefox - 这并不奇怪，因为样式有 display:none
稍后在renderDone() 我有 $('#frmGuarantor').show();更新了问题。
I have then searched for the issue and found, this bug. 你是对的，有一个错误......但它在 Chrome 中（Firefox 和 Edge 的行为根据与该“错误”相关的 CSS 草案规范讨论，仅Chrome 不遵循规范）
你能把display:none改为visbility:hidden吗？不确定 jQuery.show() 是否会显示它，但你总是可以$("#frmGuarantor")[0].style.visibility='visible'; 代替
或$("#frmGuarantor").css('visibility', 'visible'); 甚至$("#frmGuarantor").css('visibility', '');

标签： javascript jquery angularjs iframe

【解决方案1】：

有一个BUG，因此firefox 不支持iframe 中的display:none。为了解决这个问题，我使用了

visbility:hidden

并显示使用的iframe

$("#frmGuarantor")[0].style.visibility='visible'

【讨论】：

【解决方案2】：

试试这个：

$('#frmGuarantor').css("display", "inline-block");

代替：

$('#frmGuarantor').show();

【讨论】：