Javascript 加载 iFrame 时如何显示加载消息？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8626638/
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 to display loading message when an iFrame is loading?
提问by Jacob
I have an iframe that loads a third party website which is extremely slow to load.
我有一个加载第三方网站的 iframe，加载速度非常慢。
Is there a way I can display a loading message while that iframe loads the user doesn't see a large blank space?
有没有一种方法可以显示加载消息，而 iframe 加载用户看不到大的空白空间？
PS.Note that the iframe is for a third party website so I can't modify / inject anything on their page.
附注。请注意，iframe 用于第三方网站，因此我无法在其页面上修改/注入任何内容。
回答by Christina
I have done the following css approach:
我已经完成了以下 css 方法：
<div class="holds-the-iframe"><iframe here></iframe></div>
.holds-the-iframe {
background:url(../images/loader.gif) center center no-repeat;
}
回答by Minko Gechev
I think that this codeis going to help:
我认为这段代码会有所帮助：
JS:
JS：
$('#foo').ready(function () {
$('#loadingMessage').css('display', 'none');
});
$('#foo').load(function () {
$('#loadingMessage').css('display', 'none');
});
HTML:
HTML：
<iframe src="http://google.com/" id="foo"></iframe>
<div id="loadingMessage">Loading...</div>
CSS:
CSS：
#loadingMessage {
width: 100%;
height: 100%;
z-index: 1000;
background: #ccc;
top: 0px;
left: 0px;
position: absolute;
}
回答by Pascalculator
If it's only a placeholder you are trying to achieve: a crazy approach is to inject text as an svg-background. It allows for some flexbility, and from what I've read the browser support should be fairly decent (haven't tested it though):
如果它只是您想要实现的占位符：一种疯狂的方法是将文本作为 svg 背景注入。它允许一些灵活性，从我读过的浏览器支持应该是相当不错的（虽然还没有测试过）：
- Chrome >= 27
- FireFox >= 30
- Internet Explorer >= 9
- Safari >= 5.1
- 铬 >= 27
- 火狐 >= 30
- Internet Explorer >= 9
- Safari >= 5.1
html:
html：
<iframe class="iframe-placeholder" src=""></iframe>
css:
css：
.iframe-placeholder
{
background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%23FF0000" x="50%" y="50%" font-family="\'Lucida Grande\', sans-serif" font-size="24" text-anchor="middle">PLACEHOLDER</text></svg>') 0px 0px no-repeat;
}
What can you change?
你能改变什么？
Inside the background-value:
在背景值内：
font size: look for font-size=""and change the value to anything you want
font color: look for fill="". Don't forget to replace the # with %23 if you're using hexadecimal color notation. %23 stands for a # in URL encoding which is necessary for the svg-string to be able to be parsed in FireFox.
font family: look for font-family=""remember to escape the single quotes if you have a font that consists of multiple words (like with \'Lucida Grande\')
text: look for the element value of the text-element where you see the PLACEHOLDER string. You can replace the PLACEHOLDER string with anything that is url-compliant (special characters need to be converted to percent notation)
字体大小：查找font-size=""并将值更改为您想要的任何值
字体颜色：查找fill=""。如果您使用十六进制颜色表示法，请不要忘记将 # 替换为 %23。%23 代表 URL 编码中的 #，这是 svg-string 能够在 FireFox 中解析所必需的。
字体系列：查找font-family=""如果您的字体包含多个单词（如 \'Lucida Grande\'），请记住转义单引号
文本：查找您看到PLACEHOLDER string的文本元素的元素值。您可以将 PLACEHOLDER 字符串替换为符合 url 的任何内容（特殊字符需要转换为百分比表示法）
Pros:
优点：
- No extra HTML-elements
- No js
- Text can easily (...) be adjusted without the need of an external program
- It's SVG, so you can easily put any SVG you want in there.
- 没有额外的 HTML 元素
- 没有js
- 无需外部程序即可轻松 (...) 调整文本
- 它是 SVG，因此您可以轻松地将任何想要的 SVG 放入其中。
Cons:
缺点：
- Browser support
- It's complex
- It's hacky
- If the iframe-src doesn't have a background set, the placeholder will shine through (which is not inherent to this method, but just standard behaviour when you use a bg on the iframe)
- 浏览器支持
- 这很复杂
- 这很hacky
- 如果 iframe-src 没有设置背景，则占位符将显示出来（这不是此方法固有的，而是在 iframe 上使用 bg 时的标准行为）
I would only recommend this only if it's absolutely necessary to show text as a placeholder in an iframe which requires a little bit of flexbility (multiple languages, ...). Just take a moment and reflect on it: is all this reallynecessary? If I had a choice, I'd go for @Christina's method
仅当绝对有必要将文本显示为 iframe 中的占位符时，我才建议这样做，这需要一点灵活性（多种语言，...）。花点时间思考一下：这一切真的有必要吗？如果我有选择，我会选择@Christina 的方法
回答by Salt Hareket
$('iframe').load(function(){
$(".loading").remove();
alert("iframe is done loading")
}).show();
<iframe src="http://www.google.com" style="display:none;" width="600" height="300"/>
<div class="loading" style="width:600px;height:300px;">iframe loading</div>
回答by David Toledo
Here's a quick solution for most of the cases:
这是大多数情况下的快速解决方案：
CSS:
CSS：
.iframe-loading {
background:url(/img/loading.gif) center center no-repeat;
}
You can use an animated loading GIF if you want to,
如果你愿意，你可以使用动画加载 GIF，
HTML:
HTML：
<div class="iframe-loading">
<iframe src="http://your_iframe_url_goes_here" onload="$('.iframe-loading').css('background-image', 'none');"></iframe>
</div>
Using the onload event you can remove the loading image after the source page is loaded inside your iframe.
使用 onload 事件，您可以在 iframe 中加载源页面后删除加载图像。
If you are not using jQuery, just put an id into the div and replace this part of code:
如果你没有使用 jQuery，只需在 div 中放入一个 id 并替换这部分代码：
$('.iframe-loading').css('background-image', 'none');
by something like this:
通过这样的事情：
document.getElementById("myDivName").style.backgroundImage = "none";
All the best!
祝一切顺利！
回答by maxijb
Yes, you could use a transparent div positioned over the iframe area, with a loader gif as only background.
是的，您可以使用位于 iframe 区域上方的透明 div，并将加载程序 gif 作为唯一背景。
Then you can attach an onloadevent to the iframe:
然后您可以将onload事件附加到 iframe：
$(document).ready(function() {
$("iframe#id").load(function() {
$("#loader-id").hide();
});
});
回答by Romi
<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo - IFRAME Loader</title>
<style>
#frameWrap {
position:relative;
height: 360px;
width: 640px;
border: 1px solid #777777;
background:#f0f0f0;
box-shadow:0px 0px 10px #777777;
}
#iframe1 {
height: 360px;
width: 640px;
margin:0;
padding:0;
border:0;
}
#loader1 {
position:absolute;
left:40%;
top:35%;
border-radius:20px;
padding:25px;
border:1px solid #777777;
background:#ffffff;
box-shadow:0px 0px 10px #777777;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="frameWrap">
<img id="loader1" src="loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="iframe1" src="https://bots.actcorp.in/ACTAppChat/[email protected]&authToken=69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e" ></iframe>
</div>
<script>
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
});
});
</script>
</body>
</html>
回答by gaurav
I have followed the following approach
我遵循了以下方法
First, add sibling div
首先，添加兄弟div
$('<div class="loading"></div>').insertBefore("#Iframe");
and then when the iframe completed loading
然后当 iframe 完成加载时
$("#Iframe").load(function(){
$(this).siblings(".loading-fetching-content").remove();
});
回答by Ramesh Narayan
You can use as below
您可以使用如下
$('#showFrame').on("load", function () {
loader.hide();
});
