Question

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

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

有时，源内容会慢慢加载非常，因此看起来似乎什么也没发生。我希望有一个简单的加载动画，而内容加载时iframe的内容加载。当iframe完成加载时，它的内容应该弹出，加载动画应该消失。

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

Answer 1

您是否有任何理由不能听取iframe本身的onload事件？它应该在子内容加载后触发。

这样的事情：

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

Answer 2

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

主页：

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

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

<强> sourcelink.html ：

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

如果iframe来自与父页面域相同的域，则它可以通过window.parent属性调用父页面中定义的方法。

Answer 3

只需为包含元素（本例#myDiv）提供一个throbber的背景，iframe内容将在加载后重叠。

这是最简单的。

Answer 4

所以就我而言，执行以下操作对我来说是有益的。

HTML

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

而我正在点击一次按钮加载iFrame，所以这是JS

 $(document).ready(function () {

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

  ShowLoader();

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

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

    HideLoader(); 

  });
  });
 });

在我的iframe加载时，如何向我的页面添加加载指示器？

4 个答案: