iframe 有时在 Firefox 中不起作用

Posted 2023-05-09

【中文标题】iframe 有时在 Firefox 中不起作用

【英文标题】：Iframe is not working sometimes in 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', '');

【参考方案1】：

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

visbility:hidden

并显示使用的iframe

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

【参考方案2】：

试试这个：

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

代替：

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