PhoneGap en iOS con rutas URL absolutas para activos?

Question

Portar una aplicación web a PhoneGap en IOS, tenemos activo (y Ajax) direcciones URL que son las rutas absolutas, por ejemplo .:

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

Tenemos el directorio img envasados ​​bajo el directorio www de PhoneGap. La imagen no se carga con la ruta absoluta, pero sólo con una ruta relativa, por ejemplo .:

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

Podría alguien explicar cómo se está prefijado o traducida en este contexto la URL? 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 hemos probado, 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 relativa para el puerto, como las URL de ruta absoluta se utilizan en todo el CSS, el código Ajax, se establecen por piñones con el backend 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 comprobar la ruta absoluta a través de su iPhone/iPad que se vería algo como esto:

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

y será diferente en Android o Windows dispositivos, así que no creo que en realidad es una buena idea activos de referencia utilizando rutas absolutas en este caso.

Como alternativa, se podría considerar el uso de los base64 cadenas en sus archivos CSS:

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

Answer 2

hicimos algunas pruebas y tal vez un poco de JavaScript hackery puede que sea un poco más manejable. Esto cambiará todas las etiquetas <a> y <img> con URL que comienza con/en relación con el archivo actual.

poner esto en un archivo e incluirla con una etiqueta <script> o inyectarla 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 la ruta de la aplicación en JavaScript por:

cordova.file.applicationDirectory 

Desde I' m en Android, dice: "file: /// android_asset /" ... por ejemplo:

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

Al igual que esto, todos los recursos se encontrarían cuando se construyeran varias plataformas.