PhoneGap на iOS с абсолютными URL-адресами пути для активов?

Портирование веб-приложения в phoneGap на iOS, у нас есть URL-адреса активов (и ajax), которые являются абсолютными путями, например:

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

У нас есть каталог img, упакованный в каталог PhoneGap www. Изображение не будет загружаться с абсолютным путем, но только с относительным путем, например:

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

Может кто-нибудь объяснить, как URL-адрес префикса или переводится в этом контексте? То есть:.

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

тоже не работает. Итак, что такое база URL, используемая PhoneGap для iOS?

Мы также попытались, например:

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

но не идти.

Мы хотели бы избежать изменения URL-адресов на относительный для порта, так как абсолютные URL-адреса пути используются в CSS, Ajax-коде, устанавливаются Sprockets с бэкэндом Rails и т.д. Как мы можем просто получить PhoneGap/UIWebView на iOS для загрузки активов с использованием URL абсолютного пути, как написано?

Я вижу, что этот вопрос задается в разных формах здесь, в StackOverflow, но я еще не вижу правильного ответа.

Ответы

Ответ 1

Можно получить путь к приложению в JavaScript:

cordova.file.applicationDirectory

Поскольку я на Android, он говорит: "file:///android_asset/"... например:

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

Таким образом, все ресурсы будут найдены при перекрестном строительстве для разных платформ.

Ответ 2

Произошло ли некоторое тестирование и, возможно, немного хакерства JavaScript, он может сделать его более управляемым. Это изменит все теги <a> и <img> с URL-адресом, начинающимся с/по отношению к текущему файлу.

Поместите это в файл и включите его с тегом <script> или введите его 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];
  }
});

Ответ 3

При проверке абсолютного пути через ваш iPhone/iPad вы увидите что-то вроде этого:

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

И это будет отличаться от устройств Android или Windows, поэтому я не думаю, что на самом деле неплохо ссылаться на активы, используя абсолютные пути в этом случае.

В качестве альтернативы вы можете рассмотреть возможность использования строк base64 в ваших файлах CSS:

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