1

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?

Otávio Barreto
  • 1,536
  • 3
  • 16
  • 35
  • Possible duplicate of [Catch error if iframe src fails to load . Error :-"Refused to display 'http://www.google.co.in/' in a frame.."](https://stackoverflow.com/questions/15273042/catch-error-if-iframe-src-fails-to-load-error-refused-to-display-http-ww) – rlemon Sep 03 '19 at 13:53

1 Answers1

0

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.

Vitim.us
  • 20,746
  • 15
  • 92
  • 109
  • my query imports and scripts are saved on phone, I just posted this way here, because you guys can see it working, I load it via phone, and than just load the site via iframe, but why should I load it directly via ajax or any other ?method? – Otávio Barreto Sep 02 '19 at 12:45
  • could you give me a `code` example of how to do it using PostMessage api? – Otávio Barreto Sep 03 '19 at 18:10