0

从过去 2 天开始，我想要实现的是 - 当没有互联网连接“抱歉，没有互联网连接”时，我可以在我的 jquery 移动页面上显示错误消息。

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

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

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

我现在使用的代码如下 -

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

1 回答 1

1

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>
于 2012-06-22T06:49:45.330 回答