¿PhoneGap en iOS con URL de ruta absoluta para activos?

uiwebview cordova

Question

Al portar una aplicación web a phoneGap en iOS, tenemos URL de activos (y ajax) que son rutas absolutas, por ejemplo:

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

Tenemos el directorio img empaquetado en el directorio www de PhoneGap. La imagen no se cargará con la ruta absoluta, pero solo con una ruta relativa, por ejemplo:

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

¿Podría alguien explicar cómo se está prefijando o traduciendo la URL en este contexto? Es decir:

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

tampoco funciona Entonces, ¿cuál es la base de URL utilizada por PhoneGap en iOS?

También lo hemos intentado, por ejemplo:

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

pero no ir

Nos gustaría evitar cambiar las URL a relativas para el puerto, ya que las URL de ruta absolutas se usan en todo el CSS, el código Ajax, se configuran con Sprockets con el backend de Rails, etc. ¿Cómo podemos obtener PhoneGap / UIWebView en iOS para cargar los activos utilizando las URL de ruta absoluta tal como están escritas?

Veo que esta pregunta se hace mucho en varias formas aquí en StackOverflow, pero aún no he visto una respuesta correcta.

Answer 1

Al verificar la ruta absoluta a través de su iPhone / iPad, verá algo como esto:

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

Y será diferente en los Android con Android o Windows , así que no creo que sea una buena idea hacer referencia a los activos usando rutas absolutas en este caso.

Como alternativa, podría considerar usar las cadenas base64 en sus archivos CSS:

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

Answer 2

Algunas pruebas y tal vez un poco de piratería de JavaScript pueden hacerlo un poco más manejable. Esto cambiará todas las etiquetas <a> y <img> con la URL que comienza con / ser relativa al archivo actual.

Coloque esto en un archivo e stringByEvaluatingJavaScriptFromString: con una etiqueta <script> o stringByEvaluatingJavaScriptFromString: con 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];
  }
});

Answer 3

Uno puede obtener el camino a la aplicación en JavaScript por:

cordova.file.applicationDirectory

Como estoy en Android, dice: "file: /// android_asset /" ... por ejemplo:

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

De esta manera, todos los recursos se encontrarían cuando se construyeran varias plataformas.