0

私が過去 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>
4

1 に答える 1

1

scriptonerror要素は、スクリプトをロードできないときにイベントをトリガーします。ハンドラーを追加して、スクリプトが正常にロードされたかどうかを追跡できます。

<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 に答える