javascript 如何在 iframe 加载时向我的页面添加加载指示器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4587253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add a loading indicator to my page while my iframe loads?
提问by keybored
I am currently creating a page where upon clicking a link an iframe is inserted into a div and it's contents loaded. I do this using the following jQuery call:
我目前正在创建一个页面，点击一个链接后，一个 iframe 被插入到一个 div 中并加载它的内容。我使用以下 jQuery 调用执行此操作：
$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');
Sometimes the source content loads veryslowly and, as a result, it looks like nothing is happening. I would like to have a simple loading animation while the content is loading while the iframe's content loads. When the iframe finishes loading it's content should pop in and the loading animation should go away.
有时源内容加载非常缓慢，因此看起来好像什么也没发生。我想要一个简单的加载动画，同时加载 iframe 的内容，同时加载内容。当 iframe 完成加载时，它的内容应该弹出并且加载动画应该消失。
I've been considering a couple ways I could do this (e.g. having a separate loader div to simply swap the two in and out) but I'm not sure of what the 'best' approach to solving this problem is. Perhaps I shouldn't be using .html()? I'm open to suggestion if there is a more correct solution.
我一直在考虑几种可以做到这一点的方法（例如，有一个单独的加载器 div 来简单地交换两个进出），但我不确定解决这个问题的“最佳”方法是什么。也许我不应该使用 .html()？如果有更正确的解决方案，我愿意接受建议。
回答by Jess
Is there any reason you can't listen to the onloadevent of the iframe itself? It should fire after the child content has loaded.
有什么理由不能听onloadiframe 本身的事件吗？它应该在子内容加载后触发。
Something like this:
像这样的东西：
showLoader();
$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');
$('#mydiv iframe').load(function() { hideLoader(); }
回答by Matthew Abbott
You need to define a method that allows your iframe to highlight that it has finished loading, e.g.:
您需要定义一个方法，让您的 iframe 突出显示它已完成加载，例如：
Main page:
主页：
var ChildFrameComplete = function()
{
$("#progress").hide();
};
var LoadChildFrame = function()
{
$("#progress").show();
$("#mydiv").html("<iframe src=\"sourcelink.html\" ... ></iframe>");
};
sourcelink.html:
源链接.html：
$(function()
{
parent.ChildFrameComplete();
});
If the iframe is being sourced from the same domain as the parent page domain, it can call methods defined in the parent page through the window.parentproperty.
如果 iframe 来自与父页面域相同的域，它可以通过window.parent属性调用父页面中定义的方法。
回答by M.W. Felker
Just give the containing element (this case #myDiv) a background of a throbber and the iframe contents will overlap this when it's done loading.
只需给包含元素（在这种情况下为#myDiv）一个 throbber 的背景，当它完成加载时，iframe 内容将与它重叠。
That's the simplest.
那是最简单的。
回答by Hamza Khanzada
So In my case doing the following did for me..
所以在我的情况下，做以下事情对我来说..
The HTML
HTML
<iframe id="ifrmReportViewer" src="" frameborder="0" style="overflow:hidden;width:100%; height: 1000px;"></iframe>
and I was loading the iFrame on button of a click, so here is the JS
我在单击按钮时加载 iFrame，所以这里是 JS
$(document).ready(function () {
$('body').on('click','#btnLoadiFrame',function () {
ShowLoader();
$('#ifrmReportViewer').attr('src', url);
$('#ifrmReportViewer').load(function () {
HideLoader();
});
});
});
