Javascript 如何在iframe加载时向页面添加加载指示器？

我目前正在创建一个页面，点击一个链接，一个iframe就会插入到一个div中，并加载它的内容。我使用以下jQuery调用完成此操作：

$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');

$（'#mydiv'）.html（''）；

有时源内容加载速度非常慢，因此看起来什么都没有发生。我想有一个简单的加载动画，而内容加载，而iframe的内容加载。当iframe完成加载时，其内容应弹出，加载动画应消失

---

我一直在考虑几种方法来解决这个问题（例如，使用一个单独的loader div来简单地交换这两个输入和输出），但我不确定解决这个问题的“最佳”方法是什么。也许我不应该使用.html（）？如果有更正确的解决方案，我愿意接受建议。

您需要定义一种方法，允许您的iframe突出显示它已完成加载，例如：

主页：

var ChildFrameComplete = function()
{
    $("#progress").hide();
};

var LoadChildFrame = function()
{
  $("#progress").show();
  $("#mydiv").html("<iframe src=\"sourcelink.html\" ... ></iframe>");
};

$(function()
{
  parent.ChildFrameComplete();
});

---

如果iframe来自与父页面域相同的域，它可以通过

窗口调用父页面中定义的方法。parent

属性。

是否有任何原因不能侦听iframe本身的

onload

事件？它应该在加载子内容后激发

大概是这样的：

showLoader();
$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');
$('#mydiv iframe').load(function() { hideLoader(); }

showLoader（）；
$（'#mydiv'）.html（''）；
$（'#mydiv iframe'）.load（function（）{hideLoader（）；}

只需给包含元素（本例为#myDiv）一个throbber的背景，iframe内容在加载完成后将与此重叠

---

这是最简单的。

所以在我的情况下，做下面的事情对我来说是有帮助的

HTML

<iframe id="ifrmReportViewer" src="" frameborder="0" style="overflow:hidden;width:100%; height: 1000px;"></iframe>

---

“sourcelink.html”中有什么？它是一个完整的html页面吗？我只是想知道它是否需要在iframe中。我曾想添加这一点，但现在我发现我错过了。填充iframe的内容不是我可以控制或访问的内容（除了显示它）。它来自另一个域。嘿，谢谢！这是我最终采用的方法，只是做了一点小小的更改。$（“#mydiv”）.html（“”）；以这种方式处理问题或多或少是正确的吗？这可能会导致以下问题：（由于iframe下面的动画gif，CPU使用率很高）。

 $(document).ready(function () {

  $('body').on('click','#btnLoadiFrame',function () {

  ShowLoader();

  $('#ifrmReportViewer').attr('src', url);

  $('#ifrmReportViewer').load(function () {

    HideLoader(); 

  });
  });
 });