Phonegap + Jquery mobile on Android: Multiple HTML

2020-02-29 06:31发布

Javascript does not work outside index.html page:

Project Test 1:

Index.html (with GEOLOCATION PAGE CODE) works fine

Project Test 2:

Index.html (with MENU PAGE CODE)

Geolocation.html (with GEOLOCATION PAGE CODE) javascript does not work

The page Geolocation.html opens up, but javascript does not run.

What am i missing?

GEOLOCATION PAGE CODE:

<!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 PAGE CODE:

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

I have also tried to add an onload function to the body tag and call a test function but it didn't work either.

1条回答
Luminary・发光体
2楼-- · 2020-02-29 07:01

In the link to geolocation.html, add this attribute data-ajax="false". This will prevent jQuery from loading the page via Ajax.

查看更多
登录 后发表回答