2013-04-06 107 views
4

的Javascript外index.html頁面無法正常工作:在Android上的PhoneGap + jQuery Mobile的:多個HTML頁面的JavaScript不工作

項目測試1:

的index.html(與地理位置的網頁代碼)工作正常

項目測試2:

的index.html(與菜單頁CODE)

Geolocation.html(與地理位置的網頁代碼)JavaScript不工作

Geolocation.html打開的頁面,但JavaScript不運行。

我在想什麼?

地理位置頁面代碼:

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />--> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
    </script> 
    <script type="text/javascript"> 

    document.addEventListener("deviceready", onDeviceReady, false); 

    function onDeviceReady() { 
     var element = document.getElementById('geoTemp'); 
     element.innerHTML = 'Ready...'; 
     navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 10000, enableHighAccuracy: false }); 
    } 

    function onSuccess(position) { 
     var element = document.getElementById('geoTemp'); 
     element.innerHTML = 'Success...';          
     initialize(position.coords.latitude, position.coords.longitude);        
    } 

    function onError(error) { 
     var element = document.getElementById('geoTemp'); 
     element.innerHTML = 'Error...'; 
     alert('code: ' + error.code + '\n' + 
       'message: ' + error.message + '\n'); 
    } 

     function initialize(latitude, longitude) { 
     var mapOptions = { 
      center: new google.maps.LatLng(latitude, longitude), 
      zoom: 12, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
     } 

     function onBodyLoad(){ 
      alert("test!"); 
     } 
    </script> 
    </head> 
    <body> 
    <h2>Location</h2>    
       <p id="geolocation">Finding geolocation...</p> 
       <p id="geoTemp"></p> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
</html> 

MENU頁面代碼:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Test</title> 
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css"> 
<link rel="shortcut icon" href="favicon.ico"> 
<script src="js/jquery.js"></script> 
<script src="js/jquery.mobile-1.3.0.js"></script> 
<script type="text/javascript" src="js/cordova-2.5.0.js"></script> 
</head> 
<body> 
    <div data-role="page" id="pageMain"> 

     <div data-role="header"> 
      <h1> 
       TestPage 
      </h1> 
     </div> 


     <div data-role="content"> 

      <ul data-role="listview"> 
       <li><a href="geolocation.html" data-transition="slide"> 
         <h2>Geolocation Test</h2> 
         <p>Testing</p> 
       </a></li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html> 

我也試過一個onload函數添加到body標籤並調用測試功能,但它也沒有工作。

+0

也許你應該重新解釋一下這個問題。我發現很難理解你想要做什麼。你可以添加菜單代碼嗎? – 2013-04-06 07:56:57

+0

您的意思是說,當您撥打該頁面時地圖不會顯示?你在哪裏使用JQM?在你的代碼中沒有跡象,如果JQM。 – Omar 2013-04-06 08:06:44

+0

我已經更新了我的問題,我希望現在更清楚 – Klinkerhofen 2013-04-06 08:21:31

回答

5

在geolocation.html的鏈接中,添加此屬性data-ajax="false"。這將阻止jQuery通過Ajax加載頁面。

+1

data-ajax =「false」做了訣竅。謝謝 – Klinkerhofen 2013-04-08 20:55:28