PhoneGap sur iOS avec le chemin absolu d'Url pour les actifs?

Le portage d'une application web pour phoneGap sur iOS, nous avons actif (et ajax) les Url qui sont des chemins absolus, par exemple:

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

Nous avons le répertoire img emballé sous PhoneGap le répertoire www de. L'image ne se charge pas avec le chemin absolu, mais seulement avec un chemin relatif, par exemple:

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

Quelqu'un pourrait-il expliquer comment l'URL est précédé ou traduit dans ce contexte? I. e.:

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

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

Nous avons également essayé, par exemple:

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

mais pas y aller.

Nous aimerions éviter de changer les Url relatives pour le port, en tant que chemin d'accès absolu Url sont utilisés tout au long de la CSS, Ajax code, sont fixés par les Pignons avec les Rails en arrière-plan, etc. Comment pouvons-nous obtenir PhoneGap/UIWebView sur iOS pour charger les actifs en utilisant le chemin d'accès absolu Url comme l'écrit?

Je vois cette question est posée beaucoup de différentes formes, ici, sur StackOverflow, mais je n'ai pas encore une réponse correcte.

  • En supposant que c'est une seule page de l'application (comme c'est généralement recommandé pour les PhoneGap/Cordova), une raison quelconque vous ne pouvez pas utiliser <base href="."> dans votre index.html et appeler cela un jour?
InformationsquelleAutor tribalvibes | 2012-01-31
  1. 16

    On peut obtenir le chemin d'accès à l'application en JavaScript par:

    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és quand la croix des capacités pour les différentes plateformes.

    • Qui ne fonctionne pas sur iOS 8
    • Le Cordova JS couche est tout de même, n'importe quelle plate-forme. Merci de se plaindre à la "Genius Bar" concernant votre iOS questions, pas tout à fait de ma faute.
    • C'est un bug de Cordoue, au moins sur 3.7 sur iOS, comme je l'explique dans ma réponse ici " stackoverflow.com/questions/27905969/... Btw, je n'étais pas à se plaindre, tout en indiquant.
    • la version actuelle est la v4.0.0... peut-être envisager une mise à niveau? peut imaginer que l'objectif de la partie C de ne pas l'exposer correctement à la JS partie. désolé pour la rodomontade.
    • Je suis sur la dernière version. Cordova la gestion des versions est déroutant, comme CLI 4.1.2 résout à 3,7 sur iOS et 3.6.4 sur Android. Un bon post à ce sujet est devgirl.org/2014/11/07/cordovaphonegap-version-confusion
    • Cela fonctionne pour moi avec iOS 8, croient que c'est la bonne réponse.
    • Les œuvres et les besoins de l'extension des Fichiers: npmjs.com/package/cordova-plugin-file
    • Pour commencer, s'il vous plaît mentionner qu'il a besoin de npmjs.com/package/cordova-plugin-file

    InformationsquelleAutor Martin Zeitler
  2. 7

    Fait quelques tests et peut-être un peu de JavaScript hackery peut le rendre un peu plus facile à gérer. Cela va changer tous les <a> et <img> des étiquettes avec des URL commençant par /pour être relatif au fichier actuel.

    Mettre dans un fichier et de le joindre à un <script> étiquette ou l'injecter avec stringByEvaluatingJavaScriptFromString:

    document.addEventListener("DOMContentLoaded", function() {
  var dummy = document.createElement("a");
  dummy.setAttribute("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.getAttribute("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.getAttribute("href"));
    if (groups == null) {
      continue;
    }

    link.href = baseURL + groups[1];
  }
});
    • hmm, eh bien une approche agréable, mais pas sûr du moment qui va travailler depuis qu'il a besoin de modifier les chemins d'accès de tous les "autres" comprend sur la page principale. peut-être mieux de hack PG juste à supprimer le premier '/'... à la recherche dans ce.
    • Oui, cela pourrait être un problème. Mais notez que PhoneGap sur iOS est plus ou moins juste un UIWebView aussi, de sorte que vous allez vous retrouver avec les mêmes problèmes. Je pense que vous devez réécrire le code HTML de façon dynamique (système de template?) et ou aussi intercepter lien de clics en quelque sorte... je n'arrive pas à comprendre comment. Laissez-moi savoir de vos progrès.
    • À ce stade, puisque c'est seulement notre propre bien-formé HTML, un simple script sed dans la construction du pipeline a fait le tour, par exemple sed -e /href="\//href="/
    • Cela ne fonctionne pas pour la balise de script par la voie
    • L'idée d'utiliser sed a été génial. Beaucoup plus fiable que quelque chose lors de l'exécution. Mais au lieu de sed j'ai fait un cordova crochet et utilisé nœud avec le remplacer le paquet.
    InformationsquelleAutor Mattias Wadman
  3. 3

    Lors de la vérification le chemin absolu, par le biais de 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 il le sera sur Android ou Windows appareils, donc je ne pense pas que ce soit une bonne idée d'actifs de référence à l'aide des chemins absolus dans ce cas.

    Comme alternative, vous pourriez envisager d'utiliser la base64 chaînes dans vos fichiers CSS:

    div#overview
{
    background-image: url('data:image/jpeg;base64, <IMAGE_DATA>');
    background-repeat: no-repeat;
}
    • merci. est-il un PG de l'API pour la toux jusqu'à l'actuel chemin d'accès absolu à la doc de la racine? nous utilisons les données des url pour certaines images, mais ce n'est pas une solution universelle.
    • PhoneGap a un exposé de l'API pour les manipulations de fichier, mais je n'ai pas eu la chance de l'utiliser encore: docs.phonegap.com/en/1.0.0/phonegap_file_file.md.html#File
    • à l'aide de @mattias approche, je vois que nous pourrions obtenir l'original de chemin d'accès absolu du DOM et à partir de là.
    InformationsquelleAutor MonkeyCoder