1

過去2日間で達成しようとしているのは、「申し訳ありませんが、インターネット接続がありません」というインターネット接続がない場合、jQueryモバイルページにエラーメッセージが表示される可能性があるということです。

私はたくさんのことを試しましたが、どれもうまくいきませんでした。以下のコードは、try-catchブロックを使用して最後に試したときのものです。しかし、これでも役に立ちません。ブラウザにページをロードすると、次のようになります-

インターネット接続が利用可能な場合-マップが読み込まれ、完全に正常に機能します。インターネットに接続できない場合-空白のページが表示されます。ページヘッダーとフッターなし。デフォルトの灰色の背景があり、それは私のアプリケーションには良くないように見えます。:(どんな種類の助けもかなりあります。私はまだ学んでいます。

現在使用しているコードを以下に示します-

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

2 に答える 2

1

window.navigator.onLineiOS 5以降、Android 2.2以降でご利用いただけます。

if (window.navigator.onLine) {
    google.maps.event.addDomListener(window, 'load', initialize);
} else {
    document.getElementById("map_canvas").text='Sorry, No internet connection.';
}
于 2012-06-22T11:23:41.330 に答える
0

これは、PhoneGap/jQueryモバイルアプリに使用したコードです。

<script type="text/javascript" charset="utf-8" src="js/core/cordova-1.6.1.min.js"></script>
<script type="text/javascript" charset="utf-8">

    // Wait for PhoneGap to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
    //
    function onDeviceReady() {

    }
    // alert dialog dismissed
    function alertDismissed() {
        // do something
    }
    function checkReachability() {
        var _check=true;

        var networkState = navigator.network.connection.type;
        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.NONE]     = 'No network connection';

        //alert('Connection type: '+ networkState + states[networkState]);
        if(networkState==="unknown"){
            _check=false;
            showAlert();
            return _check;
        }
        else {
            return true;
        }
    }
    function showAlert() {
        navigator.notification.alert("Please connect your device to Internet.",onDeviceReady,"No Network Connectivity","OK");
    }
</script>

次に、ページに移動するボタンの内側に配置します。このようなもの：

     <div data-role="content">  
      <ul data-role="listview">
        <li><a href="#MyMapPage" onTouchStart="checkReachability()" data-transition="slide">My Map Page</a></li>
      </ul> 
     </div>

接続がない場合、ユーザーは「デバイスをインターネットに接続してください」というネイティブアラートを受け取ります。

于 2012-07-18T08:10:54.620 に答える