Android上的Phonegap + Jquery mobile：多个HTML页面Javascript不起作用答案

【问题标题】：Phonegap + Jquery mobile on Android: Multiple HTML Pages Javascript not workingAndroid上的Phonegap + Jquery mobile：多个HTML页面Javascript不起作用
【发布时间】：2013-04-06 07:43:27
【问题描述】：

Javascript 在 index.html 页面之外不起作用：

项目测试 1：

Index.html（带有地理定位页面代码）工作正常

项目测试 2：

Index.html（带有菜单页码）

Geolocation.html（带有 GEOLOCATION PAGE CODE）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>

菜单页面代码：

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

我也尝试在body标签中添加一个onload函数并调用一个测试函数，但它也不起作用。

【问题讨论】：

也许你应该重新表述一下这个问题。我发现很难理解你想要做什么。可以添加菜单代码吗？
你的意思是调用页面时地图没有出现？你在哪里使用 JQM？如果 JQM 在您的代码中没有任何迹象。
我已经更新了我的问题，希望现在更清楚
添加到 data-ajax="false" 并重试。或者，将地图画布放在数据角色页面中。
谢谢奥马尔，解决了！如何将其设置为答案？

标签： android cordova jquery-mobile

【解决方案1】：

在 geolocation.html 的链接中，添加此属性data-ajax="false"。这将阻止 jQuery 通过 Ajax 加载页面。

【讨论】：