PhoneGap sur iOS avec des URL absolues pour les ressources?

Portant une application web vers phoneGap sur iOS, nous avons des URLs (et ajax) qui sont des paths absolus, par exemple:

<img src="/img/logo.png"> 

Nous avons le directory img dans le directory www de PhoneGap. L'image ne sera pas chargée avec le path absolu, mais seulement avec un path relatif, par exemple:

 <img src="img/logo.png"> 

Quelqu'un pourrait-il expliquer comment l'URL est préfixée ou traduite dans ce context? C'est à dire:

 <img src="/www/img/logo.png"> 

ne fonctionne pas non plus. Alors, quelle est la base d'URL utilisée par PhoneGap sur iOS?

Nous avons également essayé, par exemple:

 <img src="file://img/logo.png"> <img src="file:///img/logo.png"> 

mais pas aller.

Nous aimerions éviter de changer les URL en relatif pour le port, car les URL absolues sont utilisées dans tout le code CSS, Ajax, sont définies par Sprockets avec le backend Rails, etc. Comment pouvons-nous simplement charger PhoneGap / UIWebView sur iOS pour charger les actifs en utilisant les URL du path absolu comme écrit?

Je vois que cette question est beaucoup posée sous diverses forms ici sur StackOverflow, mais je n'ai pas encore vu une réponse correcte.

On peut get le path vers l'application en JavaScript en:

 cordova.file.applicationDirectory 

Depuis que je suis sur Android, il est dit: "file: /// android_asset /" … par exemple:

 var img_path = cordova.file.applicationDirectory + 'www/img/logo.png'; 

Comme cela, toutes les ressources seraient trouvées lors de la construction croisée pour diverses plates-forms.

Est-ce que certains tests et peut-être un peu de hackery JavaScript peuvent le rendre un peu plus gérable. Cela changera toutes les balises <a> et <img> avec une URL commençant par / pour être relative au file en cours.

Mettez ceci dans un file et incluez-le avec une <script> ou injectez-le avec ssortingngByEvaluatingJavaScriptFromSsortingng:

 document.addEventListener("DOMContentLoaded", function() { var dummy = document.createElement("a"); dummy.setAtsortingbute("href", "."); var baseURL = dummy.href; var absRE = /^\/(.*)$/; var images = document.getElementsByTagName("img"); for (var i = 0; i < images.length; i++) { var img = images[i]; var groups = absRE.exec(img.getAtsortingbute("src")); if (groups == null) { continue; } img.src = baseURL + groups[1]; } var links = document.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { var link = links[i]; var groups = absRE.exec(link.getAtsortingbute("href")); if (groups == null) { continue; } link.href = baseURL + groups[1]; } }); 

Lorsque vous vérifiez le path absolu à travers votre iPhone / iPad, vous verrez quelque chose comme ceci:

 <img src="file:///var/mobile/Applications/7D6D107B-D9DC-479B-9E22-4847F0CA0C40/YourApplication.app/www/logo.png" /> 

Et ce sera différent sur Android appareils Android ou Windows , donc je ne pense pas que ce soit une bonne idée de referencer des assets en utilisant des paths absolus dans ce cas.

Comme alternative, vous pouvez envisager d'utiliser les strings base64 dans vos files CSS:

 div#overview { background-image: url('data:image/jpeg;base64, <IMAGE_DATA>'); background-repeat: no-repeat; }