JAVASCRIPT检查iframe加载是否失败 [英] JAVASCRIPT check if a iframe failed to load

问题描述

我正在编写一个PWA，它将作为我的应用程序在phonegap cordova上加载我的网站，我的问题是，如果无法加载iframe并保留我的加载器图片#loadingMessage，如何制作javascript函数以返回无连接页面完整吗?

I am writing a PWA it will load my site as an app on phonegap cordova, my question is how to make a javascript funcion to return a no connection page if it fails to load the iframe and also keep my loader image #loadingMessage intact?

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>



<style>
body {
    margin: 0;
	padding: 0;
	
}
#loadingMessage {
background:url(https://i.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.webp) center center no-repeat;
}
</style>

  <iframe style="min-height:100vh" id="frame" src="https://www.test.com" width="100%"  frameBorder="0"></iframe>

<center>
<div id="loadingMessage" class="spinner-border" style="color: #18d26e!important;   
    z-index: 1000;
    top: 45vh;
    bottom: 45vh;
    position: absolute;" role="status">
  <span class="sr-only">Loading...</span>
</div></center>

<script>
$('#frame').ready(function () {
    //$('#loadingMessage').css('display', 'none');
$("#loadingMessage").fadeOut(3000);
});
$('#frame').load(function () {
   // $('#loadingMessage').css('display', 'none');
$("#loadingMessage").fadeOut(3000);
});
</script>

有什么主意吗?

推荐答案

如果没有连接，查询导入也会失败.

If you don't have connection, your query import will fail as well.

您可以获取已知资源以检查连接，然后根据其处理状态.

You can fetch a known resource to check for connection and then handle your state according.

检测iframe状态的唯一方法是通过 PostMessage api，为此，您需要控制iframe内部和外部的代码.

The only way to detect iframe states is via PostMessage api, for that you need to control both the code inside and outside the iframe.

但是我认为您应该直接加载您的应用程序，而不要将其包装在iframe中.

But I think you should load your app directly and not wrap it inside an iframe.

这篇关于JAVASCRIPT检查iframe加载是否失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！