Javascript 代码不适用于Phonegap应用程序
目前我正在研究Phonegap，我已经找到了一个示例代码，我想让它为Phonegap工作，但我不能。 还有一件事我想提一下，这里使用的是Jquery MObile 1.2.0，但我想使用Jquery MObile 1.3.2和Jquery 2.1.1，cordova-3.4.0 任何帮助都将不胜感激。提前谢谢Javascript 代码不适用于Phonegap应用程序,javascript,android,jquery,jquery-mobile,cordova,Javascript,Android,Jquery,Jquery Mobile,Cordova,目前我正在研究Phonegap，我已经找到了一个示例代码，我想让它为Phonegap工作，但我不能。 还有一件事我想提一下，这里使用的是Jquery MObile 1.2.0，但我想使用Jquery MObile 1.3.2和Jquery 2.1.1，cordova-3.4.0 任何帮助都将不胜感激。提前谢谢 <!DOCTYPE html> <html> <head> <title>jQM Complex Demo&
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageinit', '#index',function(e,data){
var minZoomLevel = 12;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" id="content">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
First Page
</h3>
</div>
</div>
</body>
</html>
这意味着ur HTML无法检测移动平台 要检测客户端计算机上的操作系统，脚本可以分析navigator.appVersion或navigator.userAgent的值。下面是一个简单的脚本示例，该脚本设置变量OSName以反映实际的客户端操作系统
// This script sets OSName variable as follows:
// "Windows" for all versions of Windows
// "MacOS" for all versions of Macintosh OS
// "Linux" for all versions of Linux
// "UNIX" for all other UNIX flavors
// "Unknown OS" indicates failure to detect the OS
var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
document.write('Your OS: '+OSName);
此代码不起作用的原因是缺少jQuery库。没有jQuery，jQuery Mobile无法工作 这就是您收到此错误的原因： 未捕获的TypeError:无法读取未定义的， 来源：code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js2 在Android设备屏幕上，我两次看到了第一页 垂直顺序，但没有地图 更多信息，请访问：
现在Phonegap应用程序的工作代码是：：
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="file:///android_asset/www/js/jquerymobile/jquery-1.8.3.js"> </script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
</style>
<script>
$(document).on('pageinit', '#index',function(e,data){
var minZoomLevel = 12;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" id="content">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
First Page
</h3>
</div>
</div>
</body>
</htm
l> HTML似乎很好……你能告诉我你得到了什么错误吗？@Maven。我收到了Logcat消息：：：未捕获类型错误：无法读取未定义的属性“mobile”，来源：2，在Android设备屏幕上，我得到了两次垂直顺序的第一页，但没有地图。我认为你的代码有问题，目前我正在使用Windows Xp，但上面的代码会打印“您的操作系统：”Linux。那么我应该如何为这段代码添加Jquery库。我有JQuery-2.1.1文件，但它不起作用，请帮助我。当然它不起作用，看看您使用的JQuery版本。jQuery Mobile被锁定在特定的jQuery版本范围内，jQuery Mobile 1.2的最佳jQuery版本是1.8.3。我重复一遍，它不会与1.8.3以上的任何jQuery一起工作。我告诉过你我们会解决这个问题：不，它没有解决我的问题。我已经在html文件中添加了jquery-1.8.3.js文件。它又给出了一个错误未捕获类型错误：$未定义，然后在jquery Mobile之前添加jquery。这个错误可能意味着：1。jQuery未正确初始化或为2。jQuery已初始化，但在尝试使用它的内容之后
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="file:///android_asset/www/js/jquerymobile/jquery-1.8.3.js"> </script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
</style>
<script>
$(document).on('pageinit', '#index',function(e,data){
var minZoomLevel = 12;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content" id="content">
<div id="map_canvas" style="height:100%"></div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
First Page
</h3>
</div>
</div>
</body>
</htm