Question

我的页面中有一个iframe。

<iframe id="iframe" src="myurltopage" name="iframe" title="..." overflow-y='scroll' overflow-x='hidden'></iframe>      
<div id="spinner"><h3><i class="fa  fa fa-spinner fa-spin"></i></h3></div>

如果iframe是负载，我会在基本HTML上添加一个微调器，并在函数内部将其隐藏。

$(document).ready(function(){    
    $('#iframe').on('load', function()
    {   
        $('#spinner').fadeOut();
    }    
});

有时候，即使我看到页面已正确加载，微调器也不会隐藏，并且在控制台中，我看不到任何打开的加载过程。我必须重新加载该页面一次，有时甚至超过所有正常工作。

有人知道它会导致什么和/或如何防止此问题吗？

非常感谢。

Answer 1

如果要在页面上所有内容准备就绪时隐藏微调框（意味着下载了所有资源，例如图像，字体，css，脚本，iFrame等），则可以使用以下代码。如果仅在加载iFrame时想要隐藏微调框，请参阅我在注释中也输入的link。

 $(window).on('load', function() {
     $('#spinner').fadeOut();
 });

Answer 2

根据问题评论中的链接信息，我决定以这种方式解决问题

var init=false;

    $(function () {
          var innerDoc = ($("#iframe")[0].contentDocument) ? $("#iframe")[0].contentDocument:$("#iframe")[0].contentWindow.document;
          innerDoc.onreadystatechange = function () {
                if(init==false){  alert("Go");   }
                if ($('#spinner').is(":visible") == true){ $('#spinner').fadeOut(); }           
              return;
          };      
          setTimeout(innerDoc.onreadystatechange, 3000);
      });

反馈加载iframe有时效果不佳

2 个答案: