PhoneGap su iOS con URL di percorso assoluti per le risorse?

Question

porting una web app per PhoneGap su iOS, abbiamo attività (e ajax) URL che sono percorsi assoluti, ad es .:

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

Abbiamo la directory img confezionato nella directory www di PhoneGap. L'immagine non verrà caricato con il percorso assoluto, ma solo con un percorso relativo, ad es .:

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

Qualcuno potrebbe spiegare come l'URL viene prefisso o tradotta in questo contesto? I.e .:

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

non funziona. Quindi qual è la base di URL utilizzata da PhoneGap su iOS?

Abbiamo anche provato, ad es .:

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

ma non andare.

Vorremmo evitare di cambiare gli URL in relativi per la porta, poiché gli URL di percorso assoluti sono utilizzati in tutto il CSS, il codice Ajax, sono impostati da Sprockets con il back-end Rails, ecc. Come possiamo semplicemente ottenere PhoneGap/UIWebView su iOS per caricare le risorse utilizzando gli URL del percorso assoluto come scritti?

Vedo che questa domanda viene posta molto in varie forme qui su StackOverflow, ma devo ancora vedere una risposta corretta.

Answer 1

Quando si controlla il percorso assoluto attraverso il vostro iPhone/iPad si vedrebbe qualcosa di simile:

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

e sarà diverso su Android o Windows dispositivi in ​​modo non credo che in realtà è una buona idea le risorse di riferimento utilizzano percorsi assoluti in questo caso.

In alternativa si potrebbe prendere in considerazione utilizzando i base64 stringhe nei file CSS:

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

Answer 2

fatto qualche test e forse un po 'di aggiustamenti JavaScript può rendere un po' più gestibile. Questo cambierà tutti i tag <a> e <img> con URL che iniziano con/per essere relativi al file corrente.

mettere questo in un file e includerlo con un tag <script> o iniettare 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

si può ottenere il percorso dell'applicazione in JavaScript da:

cordova.file.applicationDirectory 

Dal momento che ho' su Android, si dice: "file: /// android_asset /" ... per esempio:

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

In questo modo si troverebbero tutte le risorse quando si creano cross-building per varie piattaforme.