Android 上的 Phonegap + Jquery mobile:多个 HTML 页面 Javascript 不起作用 [英] Phonegap + Jquery mobile on Android: Multiple HTML Pages Javascript not working

查看：16
本文介绍了Android 上的 Phonegap + Jquery mobile:多个 HTML 页面 Javascript 不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

项目测试 1:

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

项目测试 2:

Index.html(带有菜单页面代码)

Geolocation.html(带有地理定位页面代码)javascript 不起作用

Geolocation.html 页面打开，但 javascript 没有运行.

我错过了什么?

地理位置页面代码:

<头><!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>--><style type="text/css">html { 高度:100% }身体{高度:100%；边距:0；填充:0 }#map_canvas { 高度:100% }</风格><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 type="text/javascript">document.addEventListener("deviceready", onDeviceReady, false);函数 onDeviceReady() {var element = document.getElementById('geoTemp');element.innerHTML = '准备好...';navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 10000, enableHighAccuracy: false });}功能成功(位置){var element = document.getElementById('geoTemp');element.innerHTML = '成功...';初始化(position.coords.latitude，position.coords.longitude)；}函数 onError(error) {var element = document.getElementById('geoTemp');element.innerHTML = '错误...';警报('代码:' + 错误代码 + '
' +'消息:' + error.message + '
');}函数初始化(纬度，经度){var mapOptions = {中心:新的 google.maps.LatLng(纬度，经度)，缩放:12，mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("map_canvas"),地图选项);}函数 onBodyLoad(){警报(测试！")；}<身体><h2>位置</h2><p id="geolocation">正在查找地理位置...</p><p id="geoTemp"></p><div id="map_canvas" style="width:100%; height:100%"></div>

菜单页面代码:

<头><meta charset="utf-8"/><title>测试</title><link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css"><link rel="快捷方式图标" 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><身体><div data-role="page" id="pageMain"><div data-role="header"><h1>测试页

<div data-role="内容"><ul data-role="listview"><li><a href="geolocation.html" data-transition="slide"><h2>地理定位测试</h2><p>测试</p></a></li>

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

解决方案

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

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    + '
' +
                'message: ' + error.message + '
');
    }

      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.

解决方案

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

这篇关于Android 上的 Phonegap + Jquery mobile:多个 HTML 页面 Javascript 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆