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

Posted 2023-05-09

【中文标题】加载 iFrame 时如何显示加载消息？

【英文标题】：How to display loading message when an iFrame is loading?

【发布时间】：2012-01-27 10:31:02

【问题描述】：

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

有没有一种方法可以在 iframe 加载时显示加载消息，而用户看不到大的空白区域？

PS。请注意，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;

【讨论】：

这非常适合我的情况。选择的答案对我不起作用，因为我仅在单击选项卡时才加载 iFrame。但是这个在加载 iFrame 源代码时显示得很优雅。但太糟糕了，因为 Jacob 要求 jQuery 解决方案，所以没有选择这个作为答案......

如果您正在加载的 iframe 具有透明背景，这将无法正常工作。一旦 iframe 加载，您仍然可以看到加载 gif！

@Christna 这个技巧不适用于 IE-11。有什么黑客吗？

使用 iframe onload 功能可以移除 CSS 背景图片。

很好的答案。有用。你也最好增加一些高度，这样装载机就很容易看到了。

【参考方案2】：

我认为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;

【讨论】：

我明白你为什么在load 触发时隐藏#loadingMessage，但你为什么还要在ready 上隐藏它？是不是太早了？

这取决于用户的需求。如果他在隐藏加载消息之前不需要加载所有图像，那么他就不需要加载回调。

@OZ_ 使用addEventListener 并使用querySelector + styles 属性将上面的代码转换为普通javascript并不难：-)。除此之外，问题的作者已标记为jquery。不明白为什么你的信息是？ :-)

【参考方案3】：

如果它只是您想要实现的占位符：一种疯狂的方法是将文本作为 svg-background 注入。它具有一定的灵活性，从我读过的内容来看，浏览器支持应该相当不错（虽然还没有测试过）：

铬 >= 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"   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 代表 URL 编码中的 #，这是 svg 字符串能够在 FireFox 中解析所必需的。

字体系列：查找 font-family="" 如果您的字体包含多个单词（如 \'Lucida Grande\'），请记住转义单引号

文本：查找您看到 PLACEHOLDER 字符串的文本元素的元素值。您可以将 PLACEHOLDER 字符串替换为任何符合 url 的字符串（特殊字符需要转换为百分比表示法）

Example on fiddle

优点：

没有额外的 HTML 元素 没有js 无需外部程序即可轻松 (...) 调整文本 它是 SVG，因此您可以轻松地将所需的任何 SVG 放入其中。

缺点：

浏览器支持 很复杂 很老套 如果 iframe-src 没有设置背景，则占位符会发光（这不是此方法固有的，而是在 iframe 上使用 bg 时的标准行为）

仅当绝对有必要在 iframe 中将文本显示为占位符且需要一点灵活性（多种语言，...）时，我才会推荐此方法。花点时间思考一下：这一切真的有必要吗？如果可以选择，我会选择@Christina 的方法

【讨论】：

URI malformed，我收到此错误。

【参考方案4】：

以下是大多数情况下的快速解决方案：

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

一切顺利！

【参考方案5】：

$('iframe').load(function()
      $(".loading").remove();
    alert("iframe is done loading")
).show();


<iframe src="http://www.google.com" style="display:none;"  />
<div class="loading" style="width:600px;height:300px;">iframe loading</div>

【讨论】：

对于加载到第三方网站的 iframe 来说，这不一定是一个好的解决方案，因为他们的页面上可能没有 jQuery。

【参考方案6】：

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

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

 $(document).ready(function() 

   $("iframe#id").load(function() 
      $("#loader-id").hide();
   );
);

【参考方案7】：

您可以使用下面的代码。

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

【参考方案8】：

我遵循了以下方法

首先，添加兄弟div

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

然后当 iframe 完成加载时

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

【参考方案9】：

另一种解决方案。

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

【参考方案10】：

<!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"   />
<iframe id="iframe1" src="https://bots.actcorp.in/ACTAppChat/chat?authtext=[e-mail]&authToken=69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e" ></iframe>
</div>
<script>
    $(document).ready(function () 
        $('#iframe1').on('load', function () 
            $('#loader1').hide();
        );
    );
</script>

</body>
</html>

【参考方案11】：

你可以如下使用

$('#showFrame').on("load", function () 
        loader.hide();
);