如何在加载iFrame时显示加载消息？
如何在加载iFrame时显示加载消息？
提问于 2011-12-25 04:12:35
我有一个iframe加载第三方网站，这是非常慢的加载。
有没有办法在iframe加载用户看不到大空格的情况下显示加载中的消息？
注意，是给第三方网站的，所以我不能在他们的页面上修改/注入任何东西。
回答 11
Stack Overflow用户
回答已采纳
发布于 2013-05-10 23:17:54
我做了以下css方法：
<div class="holds-the-iframe"><iframe here></iframe></div>
.holds-the-iframe {
background:url(../images/loader.gif) center center no-repeat;
}Stack Overflow用户
发布于 2011-12-25 04:33:23
我认为this code会有所帮助：
JS：
$('#foo').ready(function () {
$('#loadingMessage').css('display', 'none');
});
$('#foo').load(function () {
$('#loadingMessage').css('display', 'none');
});HTML：
<iframe src="http://google.com/" id="foo"></iframe>
<div id="loadingMessage">Loading...</div>CSS：
#loadingMessage {
width: 100%;
height: 100%;
z-index: 1000;
background: #ccc;
top: 0px;
left: 0px;
position: absolute;
}Stack Overflow用户
发布于 2014-09-12 10:04:07
如果它只是您试图实现的占位符:一种疯狂的方法是将文本作为svg-background注入。它允许一定的灵活性，根据我所读到的，浏览器的支持应该是相当不错的(虽然还没有测试过)：
- Chrome >= 27
- FireFox >= 30
- 27 >= 9
- Safari >= 5.1
<代码>F29
html：
<iframe class="iframe-placeholder" src=""></iframe>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;
}你能改变什么？
background-value内部：
- 字体大小:查找font-size=""并将值更改为任何您想要的字体颜色:查找
- fill=""。如果您使用的是十六进制颜色表示法，请不要忘记将#替换为%23。%23代表# in URL编码，这是svg-string能够在FireFox.
- font家族中解析所必需的:查找font-family=""如果您的字体由多个单词组成，请记住转义单引号(如\'Lucida Grande\')
- text:查找文本元素的元素值，其中您会看到占位符字符串。您可以将占位符字符串替换为任何与url兼容的字符(特殊字符需要转换为百分比表示法)
优点：
没有额外的HTML-elements
- No js
- Text可以轻松地(...)可以在不需要外部程序的情况下进行调整
- 它是SVG，所以你可以很容易地放入任何你想要的SVG。
缺点：
- Browser support
- It's complex
- It's hacky
- 如果iframe-src没有背景设置，占位符将穿透(这不是此方法固有的，只是在iframe上使用bg时的标准行为)
<代码>F250
只有当绝对有必要将文本显示为iframe中的占位符时，我才会建议您这样做，这需要一点灵活性(多语言，...)。花点时间反省一下:这一切真的有必要吗？如果我可以选择，我会选择@Christina的方法
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8626638
复制相关文章
相似问题