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

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

javascript jquery iframe

Javascript 加载iFrame时如何显示加载消息？,javascript,jquery,iframe,Javascript,Jquery,Iframe,我有一个iframe可以加载第三方网站，但加载速度非常慢当iframe加载时，如果用户看不到较大的空白，是否有办法显示加载消息 PS.请注意，iframe是针对第三方网站的，因此我无法在他们的页面上修改/插入任何内容。是的，您可以在iframe区域上使用透明div，加载gif作为唯一背景然后，您可以将onload事件附加到iframe： $(document).ready(function() { $("iframe#id").load(function() { $("

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

当iframe加载时，如果用户看不到较大的空白，是否有办法显示加载消息

PS.请注意，iframe是针对第三方网站的，因此我无法在他们的页面上修改/插入任何内容。

是的，您可以在iframe区域上使用透明div，加载gif作为唯一背景

然后，您可以将

onload

事件附加到iframe：

 $(document).ready(function() {

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

我认为这将有助于：

JS:

HTML:

$（'iframe'）.load（函数（）{
$（“.loading”）.remove（）；
警报（“iframe已完成加载”）
}).show（）；
iframe加载

我采用了以下css方法：

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

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


.持有iframe{
背景：url（../images/loader.gif）中心不重复；
}

如果它只是您试图实现的占位符：一种疯狂的方法是将文本作为svg背景注入。它允许一些灵活性，并且从我所读到的内容来看，浏览器支持应该是相当不错的（尽管还没有测试）：

铬>=27
FireFox>=30
Internet Explorer>=9
狩猎>=5.1

html:

css:

.iframe占位符
{
背景：url（'data:image/svg+xml；charset=utf-8，占位符'）0px 0px不重复；
}

你能改变什么

在背景值内：

字体大小：查找font size=“并将值更改为您想要的任何值
字体颜色：查找填充=”。如果使用十六进制颜色表示法，请不要忘记将#替换为%2323代表URL编码中的#，这是在FireFox中解析svg字符串所必需的
字体系列：查找font-family=“如果字体由多个单词组成（如“Lucida Grande\”），请记住转义单引号
text：在看到占位符字符串的位置查找text元素的元素值。您可以将占位符字符串替换为符合url的任何内容（特殊字符需要转换为百分比表示法）

优点：

没有额外的HTML元素
没有js
文本可以很容易地（…）进行调整，而无需外部程序
它是SVG，因此您可以轻松地将任何想要的SVG放入其中

缺点：

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

只有当绝对有必要在需要一点灵活性（多种语言，…）的iframe中将文本显示为占位符时，我才建议这样做。花点时间思考一下：这一切真的有必要吗？如果我有选择的话，我会选择@Christina的方法

对于大多数情况，这里有一个快速解决方案：

CSS:

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

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

如果需要，可以使用动画加载GIF

HTML:

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

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

通过这样的方式：

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>

jQuery演示-IFRAME加载程序
#框架包装{
位置：相对位置；
高度：360px；
宽度：640px；
边框：1px实心#777777；
背景：#f0；
盒影：0px 0px 10px#777777；
}
#iframe1{
高度：360px；
宽度：640px；
保证金：0；
填充：0；
边界：0；
}
#装载机1{
位置：绝对位置；
左：40%；
最高：35%；
边界半径：20px；
填充：25px；
边框：1px实心#777777；
背景：#ffffff；
盒影：0px 0px 10px#777777；
}
$（文档）.ready（函数（）{
$（'#iframe1'）。on（'load'，function（）{
$（'#loader1'）.hide（）；
});
});

您可以按如下方式使用

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

我采取了以下方法

首先，添加同级div

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

您可以使用下面的代码。

是的，我不知道iFrame有任何进度回调。。。嗯。我理解为什么在

加载

触发时隐藏

#加载消息

，但为什么还要在

就绪

时隐藏它？这不是太早了吗？这取决于用户的需求。如果他不需要在隐藏加载消息之前加载所有图像，那么他就不需要加载回调。@OZ_u使用

addEventListener

和

querySelector

+styles属性：-）将上面的代码转换为普通javascript并不困难。除此之外，问题的作者标记为

jquery

。无法获取您的消息的原因？：-）这对我的案子非常有效。选择一个答案对我不起作用，因为我只在单击选项卡时加载iFrame。但这个在加载iFrame源代码时显示得非常优雅。但遗憾的是，由于Jacob要求使用jQuery解决方案，所以没有选择此选项作为答案……如果正在加载的iframe具有透明背景，则此选项不起作用。一旦iframe加载，您仍然可以看到加载的gif@克里斯蒂娜：这个把戏对IE-11不起作用。有什么黑客攻击吗？使用iframe onload功能，你可以删除CSS背景图像。回答得很好。它起作用了。你最好增加一些高度，这样加载程序就可以很容易地看到。对于在第三方网站上加载的iframe来说，这不一定是一个好的解决方案，因为他们的页面上可能没有jQuery。

$('.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 class="loading"></div>').insertBefore("#Iframe");

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

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