有问题使jQuery mobile与最新的Phonegap / cordova版本一起工作，它与cordova 3.4.0一起运行良好，但现在Phonegap构建和google play都没有接受这个版本，他们去年三月但现在没有。基本上CSS根本不起作用，我怀疑它有问题调用jquery CDN但不能确定。附件是index.html和config.xml文件
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.dubSwim.example"
versionCode = "6"
version = "0.0.6" >
<!-- versionCode is optional and Android only -->
<name>Dubswim</name>
<description>
trial version of dubswim
</description>
<author href="" email="">
D Scanlon
</author>
<icon src="icon.png" />
<preference name="phonegap-version" value="cli-5.2.0" />
<access origin="*" />
<gap:platform name="android" />
<gap:platform name="ios"/>
<gap:plugin name="org.apache.cordova.inappbrowser" source="npm" />
</widget>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--standard jQuery mobile css-->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<!--own css containing new theme f-->
<link rel="stylesheet" href="css/extra.css">
<!--google font for heading-->
<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<!--Allowing for eventual phonegap packaging, will take effect after packaging-->
<script src="phonegap.js"></script>
<!--Main jQuery and specific jQuery mobile js files(both required for jQuery Mobile)-->
</head>
<body>
<!--Starting a jQuery mobile page-->
<div data-role="page" id="home" data-theme="f">
<div data-role="header" data-theme="f"><h1>Dublins Swimming Spots</h1>
</div>
<div data-role="content" data-theme="f">
<div class="content-primary">
<!--main menu-->
<ul data-role="listview" data-inset="true">
<li><a href="#about">About</a></li>
<li><a href="#sites">Sites</a></li>
<li><a href="#tides">Tide Table</a></li>
<li><a href="#weather">Weather</a></li>
<li><a href="#links">Links</a></li>
<li><a href="#contact">Contact</a></li>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="f">
<!--Send users back to home page and main menu-->
<a href="#home" data-icon="home">Home</a>
<div class="copyright">© 2015</div>
</div>
</div>
<!--End of first jQuery mobile page-->
<!--Starting a jQuery mobile page-->
<div data-role="page" id="about" data-theme="f">
<div data-role="header" data-theme="f"><h1>Dublins Swimming Spots</h1>
</div>
<div data-role="content" data-theme="f">
<div class="content-primary">
<!--Div used in pages without lists or collapsibles to house text/tables-->
<div class="tides">
<h3>Outdoor Swimming in Dublin</h3>
<p>Hello this is an app offering a guide to the best outdoor swimmings spots in county Dublin. Its done as a personal project to showcase my own development abilities using an interest of mine as a theme. Offered here is info on the sites along with map location and Flickr search results (Precise tags are sent to Flickrs web service so inappropriate images should not appear). There is access to a 5 day weather feed also cortesy of Yahoo APIs while also the tide tables for today are possible courtesy of a Web Service kindly supplied by Magic Seaweed. Hope this app is helpful and please also visit the links which I'm sure will be of interest to you.</p>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="f">
<a href="#home" data-icon="home">Home</a>
<div class="copyright">© 2015</div>
</div>
</div>
<!--End of second jQuery mobile page-->
<!--Starting a jQuery mobile page-->
<div data-role="page" id="sites" data-theme="f">
<div data-role="header"><h1>Dublins Swimming Spots</h1>
</div>
<div data-role="content" data-theme="f">
<div class="content-primary">
<!--Set of collapsible menus will be inserted via getJSON-->
<div data-role="collapsibleset" id="site-list">
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="f">
<a href="#home" data-icon="home">Home</a>
<div class="copyright">© 2015</div>
</div>
</div>
<!--End of second jQuery mobile page-->
<!--This is a dialog page connected to the 'sites' page. An 'images' button within the collapsible menus (inserted via getJSON on previous page) will trigger this dialog-->
<div data-role="page" data-dialog="true" data-overlay-theme="f" id="photos">
<div data-role="header" data-theme="f" data-close-btn="none" id="call" >
<div id="image-header" data-theme="f">
</div>
<a href="#" data-rel="back" id="storm" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-delete"></a>
</div>
<div data-role="content" data-theme="b">
<!--This div will be loaded with a selection of flickr images. The tags for these images are contained as values in all the 'map' buttons on the 'sites' page-->
<div class="content-primary" id="images">
</div>
</div>
</div>
<!--end of images dialog page-->
<!--This is a dialog page also connected to the 'sites' page. A 'map' button within the collapsible menus (inserted via getJSON on previous page) will trigger this dialog-->
<div data-role="page" data-dialog="true" data-overlay-theme="f" id="maps">
<div data-role="header" data-theme="f" data-close-btn="none" id="call" >
<div id="map-header" data-theme="f">
</div>
<a href="#" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-delete"></a>
</div>
<div data-role="content" data-theme="b">
<div class="content-primary" id="location">
<!--iframe for google map who's address is loaded via getJSON based on the value of whichever 'map' button is pressed within the 'sites' page-->
<iframe id="map-frame"
width="90%"
height="450"
frameborder="0" style="border:0"
src="">
</iframe>
</div>
</div>
</div>
<!--end of map dialog page-->
<!--Start of third jQuery mobile page-->
<div data-role="page" id="tides" data-theme="f">
<div data-role="header"><h1>Dublins Swimming Spots</h1>
</div>
<div data-role="content" data-theme="f">
<div class="content-primary">
<!--Div used in pages without lists or collapsibles to house text/tables-->
<div class="tides">
<!--Dynamicaaly loaded with todays Date gotten via getJSON from the Magic Seaweed API-->
<p id="forecast"></p>
<!--Responsive jQuery mobile table that responds to screen width-->
<table data-role="table" class="ui-responsive" data-mode="reflow" id="tabless">
<thead>
<tr>
<th>Time</th>
<th>Stage</th>
<th>Height</th>
</tr>
</thead>
<!--Loaded with Times, Tide heights and Tide Stages taken from the Magic Seaweed API-->
<tbody id="forecastTable">
</tbody>
</table>
<p id="details"></p>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="f">
<a href="#home" data-icon="home">Home</a>
<div class="copyright">© 2015</div>
</div>
</div>
<!--End of third jQuery mobile page-->
<!--Start of fourth jQuery mobile page-->
<div data-role="page" id="weather" data-theme="f">
<div data-role="header"><h1>Dublins Swimming Spots</h1>
</div>
<div data-role="content" data-theme="f">
<div class="content-primary">
<!--Div used in pages without lists or collapsibles to house text/tables-->
<div class="tides" id="weatherData">
<!--Responsive jQuery mobile table that responds to screen width-->
<table data-role="table" class="ui-responsive" data-mode="reflow" id="tabless"> <thead>
<tr>
<!--table headings kept blank-->
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<!--Loaded with data from the YAhoo weather API-->
<td id="one"></td>
<td id="two"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="f">
<a href="#home" data-icon="home">Home</a>
<div class="copyright">© 2015</div>
</div>
</div>
<!--End of fourth jQuery mobile page-->
<!--Start of fifth jQuery mobile page-->
<div data-role="page" id="links" data-theme="f">
<div data-role="header" data-theme="f"><h1>Dublins Swimming Spots</h1>
</div>
<div data-role="content" data-theme="f">
<div class="content-primary">
<!--list of links set to data-inset=true so as not to be full page width-->
<ul data-role="listview" id="link-list" data-inset="true">
<li><a data-theme="f" href="http://magicseaweed.com" target="_blank">Magic Seaweed</a></li>
<li><a href="https://www.flickr.com/" target="_blank">Flickr by Yahoo</a></li>
<li><a href="http://diving.ie" target="_blank">CFT- Irish Underwater Council</a></li>
<li><a href="http://www.underwater-ireland.com">Underwater-Ireland(Snorkelling)</a></li>
<li><a href="http://www.ukho.gov.uk/easytide/EasyTide/ShowPrediction.aspx?PortID=0617&PredictionLength=7">7 Day Tide Forecast</a></li>
<li><a href="http://www.outdoorswimming.ie">Nationwide Outdoor Swimming</a></li>
<li><a href="http://http://www.blueflagireland.org/">Irish Beaches</a></li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="f">
<a href="#home" data-icon="home">Home</a>
<div class="copyright">© 2015</div>
</div>
</div>
<!--End of fifth jQuery mobile page-->
<!--Start of sixth jQuery mobile page-->
<div data-role="page" id="contact" data-theme="f">
<div data-role="header" data-theme="f"><h1>Dublins Swimming Spots</h1>
</div>
<div data-role="content" data-theme="f">
<div class="content-primary">
<!--list of links set to data-inset=true so as not to be full page width-->
<ul data-role="listview" id="link-list" data-inset="true">
<li><a href="mailto:davpsca@hotmail.com?Subject=Query" target="_blank">email:davpsca@hotmail.com</a></li>
<li><a href="http://davscansites.netne.net/">Web Portfolio</a></li>
<li><a href="https://www.linkedin.com/pub/david-scanlon/29/1a8/82b/en">On Linked In</a></li>
<li><a href="https://github.com/david-scan">On Github</a></li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="f">
<a href="#home" data-icon="home">Home</a>
<div class="copyright">© 2015</div>
</div>
</div>
<!--End of sixth jQuery mobile page-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var tidesUrl="http://magicseaweed.com/api/xj7j07WNaFK5Emc5f89t0G022JF1CRog/tide/?spot_id=694";
var tideForecast="http://magicseaweed.com/api/xj7j07WNaFK5Emc5f89t0G022JF1CRog/forecast/?spot_id=694";
/*Getting JSON data from the magic seaweed api, it gives the data for the tide table loaded into
the tides page*/
$.getJSON(tidesUrl, function(data){
/*API callback contains timestamps that need to be converted so Im
creating arrays to house the timestamps for hours and minutes*/
times=[];
hours=[];
mins=[];
$.each(data, function(){
/*first im getting the first timestamp which is simply todays date and current time
and converting it to a readable date that will be displayed before table*/
dateOfMonth = new Date(data[0]["timestamp"]*1000);
//then change this converted timestamp to a string
date = dateOfMonth.toGMTString();
//Im slicing the section of this string I actually require(just the day & date)
refineDate=date.slice(0,-13);
//now I append it into the forecast paragraph
$("#forecast").append("<b>Tide times for "+refineDate+"</b>");
});
//now to get the hours and minutes for all four tide heights that occur on todays date
// I start the request within the tide array contained further within the JSON callback
$.each(data[0]["tide"], function(i, item){
//I convert and push the timestamps within the tide array into my own 'times' array
times.push(new Date(item["timestamp"]*1000));
/* then I get the Hours from my 'times' array. Unfortunately the Javascript
Date object does'nt add a zero before single digit hours so im adding it and if
a zero is added before a two digit hour then the substr kicks in removing characters
that are 3 places back from the end of the individual hour strings*/
hours.push(("0"+times[i].getUTCHours()).substr(-2));
//same as above except pushing the minutes into its own array
mins.push(("0"+times[i].getUTCMinutes()).substr(-2));
//the hours and minutes can now be appended to the table along with the other data(tide heights and whether High or Low)
$("#forecastTable").append("<tr><td>"+hours[i]+":"+mins[i]+"</td><td>"+item["state"]+"</td><td>"+item["shift"]+"m</td></tr>");
});
});
$.getJSON(tideForecast, function(data){
$.each(data, function(i,item){
$("#details").html("<b>Wind is "+data[0]["wind"]["speed"]+"mph, direction "+data[0]["wind"]["compassDirection"]+". Water Temp "+data[0]["condition"]["temperature"]+"c</b>");
});
});
/*The Yahoo weather API contains a weather gif I wish to use and this is contained
within one large JSON callback value(the value for 'desription') that is a string also containing
a five day summary and links to Yahoos main weather page. String methods will be required*/
var weatherURL="https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22dublin%22)%20and%20u%3D%27c%27&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
$.getJSON(weatherURL, function(data){
//an array to help store the description value so modification can be done
yahooForecast=[];
//starting the getJSOn function at a point where the description value can be gotten directly
$.each(data["query"]["results"]["channel"], function(){
//push the description value into the array
yahooForecast.push(this["description"]);
//converting the this array to a string
forecastSplit=yahooForecast.toString();
/*I wish to load different parts of this string into their own individual cells on a
jQuery table to make it screen responsive so I will need to create two substrings.
Firstly I want to emphasise the start of the first substring section which is the start of the weather gif. I can do this using the below command that gives the Index number of
the requested expression within the IndexOf object. Im passing this Index number of this
expression to a variable */
startLocation=forecastSplit.lastIndexOf("<img src=");
/*now the end of the first substring section that contains the gif, it will also
include a general summary for today. Its finishing point is C<BR /> and this is
also turned to a variable*/
degreeLocation=forecastSplit.lastIndexOf(" C<BR />");
/*Now the start of the second substring section of the string(search and lastIndexOf perform the same function)*/
forecastLocation=forecastSplit.search("<b>Forecast:</b>");
//console.log(forecastSplit);
//console.log(forecastLocation);
/*This is the first cell in the table into which is appended the start and end
of the first section(substring) of the string. The two variables, filled above,
contain string indexes for start and end of the first substring*/
$("#one").html(forecastSplit.substr(startLocation, degreeLocation));
/*The second cell contains the variable for the start of the second substring
and as I require all the string after this point I dont need an endpoint value*/
$("#two").html(forecastSplit.substr(forecastLocation));
});
});
/*making a request to my own web service containing the information needed for
collapsible menus to be loaded into the 'sites' page.*/
$.getJSON("http://davestest.webuda.com/api/index.php/dubswim/getInfo",function(data){
$.each(data, function(){
/*It will append the actual collapsible headings the paragraphs and also buttons
for calling a flickr dialog and a map dialog, these buttons will have unique values
so only one of each dialog will be needed*/
$("#site-list").append("<div data-role=\"collapsible\" data-collapsed-icon=\"carat-d\" data-expanded-icon=\"carat-u\"><h1>"+ this["Site"] + "</h1><p class=\"collapse-text\">"+ this["test"] + "</p><a href=\"#photos\" class=\"ui-shadow ui-btn ui-corner-all ui-btn-inline\" data-transition=\"pop\" data-inline=\"true\" name="+ this["Site"] +" value="+this["Tags"]+">Images</a><a href=\"#maps\" class=\"ui-shadow ui-btn ui-corner-all ui-btn-inline\" data-transition=\"pop\" data-inline=\"true\" name="+ this["Site"] +">Map</a></div>");
});
});
$(document).ajaxSuccess(function(event,xhr,settings){
if(settings.url=="http://davestest.webuda.com/api/index.php/dubswim/getInfo"){
/*after the collapsibles have been successfully loaded I can now click the button
to call the 'photos' dialog*/
$("[href='#photos']").click(function(){
//pass the name of the button to a variable
var get=$(this).attr('name');
//make the value of this variable the heading of the dialog
$("#image-header").html("<h1 class=\"dialog-head\">"+get+" on Flickr</h1>");
/*the selected button also contains its own value attribute that will be used as tags
for the Flickr API*/
var photoTags=$(this).attr('value');
//The flickr api is called and the above variable added as tags for locating specific photos
(function() {
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
tags: photoTags,
tagmode: "all",
format: "json"
})
//a maximum of 4 photos will be appended to the 'images' dialog
.done(function( data ) {
$.each( data.items, function( i, item ) {
$('#images').append("<a href="+item.link+" target=\"_blank\"><img src="+item.media.m+"/></a>");
if ( i === 3 ) {
return false;
}
});
});
})();
});
/*after the collapsibles have been successfully loaded I can now click the button
to call the 'maps' dialog*/
$("[href='#maps']").click(function(){
//pass the name of the button to a variable
var site=$(this).attr('name');
//make the value of this variable the heading of the dialog
$("#map-header").html("<h1 class=\"dialog-head\">"+site+" on Map</h1>");
/*I have links for each map that are accessed through this web service and I use
the above variable again, this time in a GET request value to get the specific map
link for the selected button*/
$.getJSON("http://davestest.webuda.com/api/index.php/dubswim/mapInfo?name="+site, function(data){
$.each(data, function(){
/*The value from the returned data is inserted into the below src attribute
replacing any existing src attribute*/
$("#map-frame").attr('src', this["map"]);
});
});
});
}
if(settings.url==weatherURL){
/*This ensures the links within the weather table, returned by the Yahoo weather API,
will open on the default mobile browser, this requires the Phonegap InAppBrowser*/
$("#weatherData a[href]").click(function(){
var link=$(this).attr('href');
window.open(link, "_system");
return false;
});
}
if(settings.url==flickerAPI){
/*This that the images returned by the flickr API
will open on the default mobile browser, this requires the Phonegap InAppBrowser*/
$("#images a[href]").click(function(){
var link=$(this).attr('href');
window.open(link, "_system");
return false;
});
}
});
$(document).ajaxError(function(event, xhr, settings){
alert("Connection for "+settings.url+"is Unavailable");
});
//this ensures emptying of the images within the 'images' dialog when the dialog is closed
$("#storm").click(function(){
$('#images').empty();
});
/*This ensures the links within the Links page and the Contact page
will open on the default mobile browser, this requires the Phonegap InAppBrowser*/
$("#link-list li a[href], .tides a[href]").click(function(){
var link=$(this).attr('href');
window.open(link, "_system");
return false;
});
});
</script>
</body>
</html>
答案 0 :(得分：1)
我建议不要使用CDN在Cordova应用程序中引入JQM（或任何其他库）。将它们包含在项目中。
尽管如此，Cordova 5.X在安全性方面也有一些重大变化。您需要配置白名单插件并使用内容安全配置文件来允许访问CDN。您可能只想使用5.X创建一个空白项目，以便您可以看到差异（添加了CSP，白名单插件等）。
对于应用包之外的所有内容，您需要将其添加到CSP中。在这里阅读： https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives
这就是示例CSP的样子：
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline';">
此外，插件名称空间的默认插件已从3.4更改为5.X.新的inappbrowser插件就在这里（确保你使用的是5.X版本）： https://github.com/apache/cordova-plugin-inappbrowser