JAVASCRIPT check if a iframe failed to load

问题

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>

Any idea?

回答1:

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.

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.

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

来源：https://stackoverflow.com/questions/57751088/javascript-check-if-a-iframe-failed-to-load