Jquery 移动错误消息，当没有互联网连接加载谷歌地图

Jquery Mobile error message when no internet connection to load google maps

本文关键字：互联网 连接 加载 谷歌地图 移动 错误 消息 Jquery      更新时间：2023-09-26

我在过去 2 天中试图实现的是 - 当没有互联网连接时，我可以在我的 jquery 移动页面上显示错误消息，即"对不起，没有互联网连接"。

我尝试了很多东西，但没有一个奏效。下面的代码现在是我最后一次尝试使用 try-catch 块的时间。但即使这样也无济于事。当我在浏览器中加载页面时，会发生以下情况 -

  1. 当互联网连接可用时 - 地图已加载并且工作正常。
  2. 当没有互联网连接时 - 我得到空白页。 没有页眉和页脚。 有一些默认的灰色背景，这对我的应用程序来说看起来很糟糕。 :(

任何形式的帮助都是可观的。我还在学习。

我现在使用的代码如下 -

<!DOCTYPE html> 
<html>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="assets/css/master.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/css/jquery.mobile.structure-1.0.min.css"              type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/css/jquery.mobile.theme-1.0.min.css" type="text/css" media="screen" />
  <script src="assets/js/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="assets/js/jquery.mobile-1.0.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <style type="text/css"> 
     #map_canvas { height: 330px; width: 100%; margin: 0px; padding: 0px }
  </style>
</head> 
<body>
  <div data-role="header" data-theme="e">
  <a data-icon="home" data-iconpos="notext" rel="external" href="index.html#page2"></a>
    <h1>Maps</h1>   
  </div>
  <div data-role="content" data-theme="d">  
    <div id="map_canvas">
      <script type="text/javascript">
         function initialize(){
           try{
                var locations = [
               ['Dr. Martin Luther King Library',37.3356,-121.8853, 4],
               ['Duncan Hall',37.3325,-121.8820, 5],
                   ['Clark Hall',37.3360,-121.8827, 3],
                   ['Event Center',37.3355,-121.8797, 2],
                   ['Student Union',37.3369,-121.8806,  1]
                 ];
                var map = new google.maps.Map(document.getElementById('map_canvas'), {
                          zoom: 16,
                          center: new google.maps.LatLng(37.3369,-121.8806),
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                       });
                var infowindow = new google.maps.InfoWindow();
                var marker, i;
               for (i = 0; i < locations.length; i++) 
                 {  
                    marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                         map: map
                    });
                  google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);
                          } 
             })(marker, i));
                 }
                   }
             catch(err)
               {
                 document.getElementById("map_canvas").text='Sorry, No internet connection.';
               }
         }
       google.maps.event.addDomListener(window, 'load', initialize);
  </script>  
  </div>
</div>
<div data-role="footer" data-theme="e">
<h4>&copy; blah-blah Inc.</h4>
</div>
</body>
</html>

script元素在无法加载脚本时触发onerror事件。您可以添加处理程序并跟踪脚本是否成功加载：

<script src="http://maps.google.com/maps/api/js?sensor=false" 
        onerror="javascript:alert('No internet connection.')"></script>

更新：您可以尝试这样的事情：

<!DOCTYPE html> 
<html>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="assets/css/master.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/css/jquery.mobile.structure-1.0.min.css"              type="text/css" media="screen" />
  <link rel="stylesheet" href="assets/css/jquery.mobile.theme-1.0.min.css" type="text/css" media="screen" />
  <script src="assets/js/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="assets/js/jquery.mobile-1.0.min.js" type="text/javascript" charset="utf-8"></script>    
  <script type="text/javascript">
      function initialize(){
         //..... Your code with removed try/catch block
      }
  </script>  
  <style type="text/css"> 
     #map_canvas { height: 330px; width: 100%; margin: 0px; padding: 0px }
  </style>
</head> 
<body>
  <div data-role="header" data-theme="e">
  <a data-icon="home" data-iconpos="notext" rel="external" href="index.html#page2"></a>
    <h1>Maps</h1>   
  </div>
  <div data-role="content" data-theme="d">  
    <div id="map_canvas"></div>
</div>
<div data-role="footer" data-theme="e">
<h4>&copy; blah-blah Inc.</h4>
</div>
<script src="http://maps.google.com/maps/api/js?sensor=false" onload="javascript:initialize()" onerror="javascript:$('#map_canvas').html('No internet connection')"></script>
</body>
</html>
相关文章：