PhoneGap auf iOS mit absoluten Pfad-URLs für Assets?

Portierung einer web-app auf phoneGap für iOS, haben wir die Anlage (und ajax) URLs werden absolute Pfade, z.B.:

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

Wir haben die img-Verzeichnis verpackt unter PhoneGap www-Verzeichnis. Das Bild wird nicht geladen mit dem absoluten Pfad, sondern nur mit einem relativen Pfad, z.B.:

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

Könnte mir bitte jemand erklären, wie das URL-Präfix oder übersetzt in diesem Kontext? I. e.:

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

funktioniert entweder nicht. Also, was ist die URL-Basis von PhoneGap für iOS?

Wir haben auch versucht, z.B.:

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

aber nicht gehen.

Möchten wir vermeiden, ändern Sie die URLs relativ zum Hafen, als absoluter Pfad-URLs sind in der gesamten CSS -, Ajax-code werden durch Ritzel mit dem Rails-backend, etc. Wie können wir nur bekommen, PhoneGap/UIWebView unter iOS zum laden der assets mit dem absoluten Pfad URLs wie geschrieben?

Sehe ich diese Frage sehr viel in verschiedenen Formen, hier auf StackOverflow, aber ich habe noch zu sehen, die eine richtige Antwort.

Kommentar zu dem Problem

Vorausgesetzt, es ist eine single-page-app (wie allgemein empfohlen für PhoneGap/Cordova), irgendeinem Grund können Sie nicht einfach <base href="."> in Ihre index.html und nennen es einen Tag? Kommentarautor: Trott

InformationsquelleAutor der Frage tribalvibes | 2012-01-31

15

Kann man den Pfad der Anwendung in JavaScript durch:
```
cordova.file.applicationDirectory
```
Da bin ich auf Android, es sagt: "file:///android_asset/" ...zum Beispiel:
```
var img_path = cordova.file.applicationDirectory + 'www/img/logo.png';
```
Wie diese alle Ressourcen gefunden werden könnten, wenn Kreuz-Gebäude für verschiedene Plattformen.

InformationsquelleAutor der Antwort Martin Zeitler

Habe einige Tests und vielleicht ein bisschen JavaScript-Hack kann es ein bisschen mehr überschaubar. Dies wird sich ändern alle <a> und <img> - tags mit der URL, die mit /beginnen, werden relativ zur aktuellen Datei.

Setzen Sie diese in eine Datei, und schließen Sie es mit einem <script> tag oder Spritzen es mit 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];
  }
});

InformationsquelleAutor der Antwort Mattias Wadman

3

Beim prüfen der absolute Pfad durch den zu Ihrem iPhone/iPad sehen Sie etwas wie dies:
```
<img src="file:///var/mobile/Applications/7D6D107B-D9DC-479B-9E22-4847F0CA0C40/YourApplication.app/www/logo.png" />
```
Und es werden verschiedene auf Android oder Windows Geräte, so dass ich nicht denke, dass es tatsächlich eine gute Idee, um Referenz-assets mit absoluten Pfaden in diesem Fall.

Als alternative könnte man erwägen, den base64 Zeichenfolgen in Ihren CSS-Dateien:
```
div#overview
{
    background-image: url('data:image/jpeg;base64, <IMAGE_DATA>');
    background-repeat: no-repeat;
}
```
InformationsquelleAutor der Antwort MonkeyCoder

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.