当 iFrame 正在加载时如何显示加载消息？

我有一个 iframe，加载第三方网站是非常缓慢的加载。

有没有一种方法，我可以显示一个加载消息，而 iframe 加载用户没有看到一个大的空白空间？

附言。注意，iframe 是针对第三方网站的，所以我不能在他们的页面上修改/注入任何东西。

171671 次浏览
小开

是的，您可以使用一个位于 iframe 区域上的透明 div，加载器 gif 仅作为背景。

然后您可以将 onload事件附加到 iframe:

 $(document).ready(function() {


$("iframe#id").load(function() {
$("#loader-id").hide();
});
});
小开

我认为 这个密码会有所帮助:

约翰逊:

$('#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;
}
小开 
$('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>
小开
最佳答案

我采用了以下 css 方法:

<div class="holds-the-iframe"><iframe here></iframe></div>


.holds-the-iframe {
background:url(../images/loader.gif) center center no-repeat;
}
小开

如果它只是一个您试图实现的占位符: 一种疯狂的方法是将文本作为 svg-back 注入。它允许一些灵活性，从我读到的浏览器支持应该是相当不错的(虽然还没有测试过) :

  • Chrome > = 27
  • 火狐 > = 30
  • Internet Explorer = 9
  • Safari > = 5.1

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;
}

你能改变什么？

背景值:

  • 字体大小: 查找 Font-size =””并将值更改为您想要的任何值

  • 字体颜色: 查找 填写 =”。如果使用十六进制颜色表示法，不要忘记用% 23替换 # 。% 23表示 URL 编码中的 # ，这是 svg-string 能够在 FireFox 中解析所必需的。

  • Font family: 查找 Font-family = “”记住，如果你的字体包含多个单词(比如“ Lucida Grande”) ，就要避免使用单引号

  • Text: 查找文本元素的元素值，其中可以看到 占位器字符串。您可以将 PLACEHOLDER 字符串替换为任何与 url 兼容的字符串(需要将特殊字符转换为百分比符号)

小提琴的例子

优点:

  • 没有额外的 HTML 元素
  • 没有 Js
  • 文本可以很容易地(...)进行调整，而不需要外部程序
  • 它是 SVG，所以您可以轻松地在其中放入任何您想要的 SVG。

缺点:

  • 浏览器支持
  • 很复杂
  • 太俗气了
  • 如果 iframe-src 没有背景集，占位符就会显示出来(这不是这个方法固有的特性，而只是在 iframe 上使用 bg 时的标准行为)

只有当在 iframe 中以占位符的形式显示文本是绝对必要的时候，我才会推荐使用这种方法，因为这需要一点灵活性(多种语言，... ...)。花点时间反思一下: 所有这些 真的都是必要的吗？如果可以选择，我会选择@Christina 的方法

小开

下面是大多数情况下的一个快速解决方案:

CSS:

.iframe-loading {
background:url(/img/loading.gif) center center no-repeat;
}

如果你愿意，你可以使用动画加载 GIF,

HTML:

<div class="iframe-loading">
<iframe src="http://your_iframe_url_goes_here"  onload="$('.iframe-loading').css('background-image', 'none');"></iframe>
</div>

使用 onload 事件，可以在源页面加载到 iframe 中之后删除加载映像。

如果不使用 jQuery，只需在 div 中添加一个 id 并替换这部分代码:

$('.iframe-loading').css('background-image', 'none');

像这样的东西:

document.getElementById("myDivName").style.backgroundImage = "none";

一切顺利！

小开 
<!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/chat?authtext=test@user8.com&authToken=69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e" ></iframe>
</div>
<script>
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
});
});
</script>


</body>
</html>
小开

您可以使用如下

$('#showFrame').on("load", function () {
loader.hide();
});
小开

我采用了以下方法

首先，添加兄弟 div

$('<div class="loading"></div>').insertBefore("#Iframe");

然后当 iframe 完成加载时

$("#Iframe").load(function(){
$(this).siblings(".loading-fetching-content").remove();
});
小开

您可以使用以下代码。

 iframe {background:url(../images/loader.gif) center center no-repeat; height: 100%;}
小开

另一种解决办法。

<iframe srcdoc="Loading..." onload="this.removeAttribute('srcdoc')" src="https://example.com"></iframe>

请注意，Srcdoc属性可以有任何 HTML 标记。因此您可以对消息应用自定义样式。

<iframe id="example" src="https://example.com"></iframe>
<script>
const iframe = document.getElementById('example');
iframe.srcdoc = '<!DOCTYPE html><p style="color: green;">Loading...</p>';
iframe.addEventListener('load', () => iframe.removeAttribute('srcdoc'));
</script>

提交答案