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

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

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

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

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


ios url cordova uiwebview sprockets
person tribalvibes    schedule 31.01.2012    source источник
comment
Предполагая, что это одностраничное приложение (как обычно рекомендуется для PhoneGap/Cordova), есть ли причина, по которой вы не можете просто использовать ‹base href=.› в вашем index.html и покончить с этим?   -  person Trott    schedule 14.11.2013

Ответы (4)


arrow_upward
17
arrow_downward

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

cordova.file.applicationDirectory

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

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

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

person Martin Zeitler    schedule 23.11.2014
comment
Уровень Cordova JS одинаков, независимо от платформы. Пожалуйста, сообщите в Genius Bar о проблемах с iOS, это не совсем моя вина. - person Martin Zeitler; 16.01.2015
comment
Это ошибка в Cordova, по крайней мере, в версии 3.7 на iOS, как я объясняю в своем ответе здесь stackoverflow.com/questions/27905969/ Кстати, я не жаловался, просто констатирую. - person Mirko; 16.01.2015
comment
текущая версия - v4.0.0... может стоит обновить? можно представить, что целевая часть C не предоставляет ее должным образом части JS. извините за разглагольствование. - person Martin Zeitler; 17.01.2015
comment
Я на последнем релизе. Версии Cordova сбивают с толку, так как CLI 4.1.2 преобразуется в 3.7 на iOS и 3.6.4 на Android. Хороший пост об этом — devgirl.org/2014/11/07/cordovaphonegap. -версия-путаница - person Mirko; 18.01.2015
comment
Это работает для меня с iOS 8, поверьте, это правильный ответ. - person Eric_WVGG; 27.02.2015
comment
Работает и нуждается в плагине File: npmjs.com/package/cordova-plugin-file - person Vince; 24.09.2015
comment
Для начала укажите, что для этого требуется npmjs.com/package/cordova-plugin-file< /а> - person Paulo Coghi; 13.12.2015

arrow_upward
8
arrow_downward

Провел некоторое тестирование и, возможно, немного взлома 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];
  }
});
person Mattias Wadman    schedule 31.01.2012
comment
хм, неплохой подход, но не уверен, что время для этого сработает, поскольку ему нужно изменить пути всех других включений на главной странице. может быть, лучше взломать PG, чтобы просто удалить начальный '/'... глядя на это. - person tribalvibes; 01.02.2012
comment
Да, это может быть проблемой. Но обратите внимание, что PhoneGap на iOS — это тоже более или менее просто UIWebView, так что вы столкнетесь с теми же проблемами. Я думаю, вы должны динамически переписывать HTML-код (система шаблонов?), а также каким-то образом перехватывать клики по ссылкам... я не понял, как это сделать. Дайте мне знать о вашем прогрессе. - person Mattias Wadman; 01.02.2012
comment
На этом этапе, поскольку это только наш собственный правильно сформированный HTML, простой скрипт sed в конвейере сборки сделал свое дело, например. sed -e /href=\//href=/ - person tribalvibes; 04.02.2012
comment
Идея использовать sed была потрясающей. Гораздо надежнее, чем что-то во время выполнения. Но вместо sed я сделал хук кордовы и использовал узел с пакетом replace< /а>. - person JoshuaDavid; 19.07.2015

arrow_upward
3
arrow_downward

При проверке абсолютного пути через ваш 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;
}
person MonkeyCoder    schedule 31.01.2012
comment
благодаря. есть ли API PG, чтобы выкашливать текущий абсолютный путь к корню документа? мы используем URL-адреса данных для некоторых изображений, но это не универсальное решение. - person tribalvibes; 01.02.2012
comment
PhoneGap имеет открытый API для работы с файлами, но у меня пока не было возможности его использовать: docs.phonegap.com/en/1.0.0/phonegap_file_file.md.html#File - person MonkeyCoder; 01.02.2012
comment
используя подход @mattias, я вижу, что мы могли бы получить исходный абсолютный путь из DOM и перейти оттуда. - person tribalvibes; 01.02.2012

arrow_upward
0
arrow_downward

В ionic 5/angular 12 у меня есть
this.file.applicationDirectory+'/www/assets/pdf/my.pdf'
, и это работает для моего приложения с https://ionicframework.com/docs/native/file https://ionicframework.com/docs/native/document-viewer.

person Wojciech Parzych    schedule 18.06.2021