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

javascript jquery iframe

2022-08-30 04:30:35

我有一个iframe，可以加载第三方网站，加载速度非常慢。

有没有办法在 iframe 加载用户看不到大空白空间时显示加载消息？

附言。请注意，iframe适用于第三方网站，因此我无法在其页面上修改/注入任何内容。

答案 1

我已经完成了以下css方法：

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

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

答案 2

我认为这段代码会有所帮助：

JS：

$('#foo').ready(function () {
    $('#loadingMessage').css('display', 'none');
});
$('#foo').load(function () {
    $('#loadingMessage').css('display', 'none');
});

网页：

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