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

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

25 голосов
/ 31 января 2012

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

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

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

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

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

<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, но я пока не вижу правильного ответа.

Ответы [ 3 ]

16 голосов
/ 23 ноября 2014

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

cordova.file.applicationDirectory

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

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

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

7 голосов
/ 31 января 2012

Провели некоторое тестирование и, возможно, немного хакерских программ на 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 голосов
/ 31 января 2012

При проверке абсолютного пути через ваш 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;
}
...