Question

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

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

有什么主意吗？

Answer 1

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

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

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

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

JAVASCRIPT检查iframe加载是否失败

1 个答案: