web-dev-qa-db-ja.com

アセットの絶対パスURLを使用するiOSのPhoneGap？

IOSのPhoneGapにWebアプリを移植すると、絶対パスであるアセット（およびAjax）URLがあります。例：

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

PhoneGapのwwwディレクトリの下にimgディレクトリがパッケージされています。画像は絶対パスでは読み込まれず、相対パスでのみ読み込まれます。例：

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

このコンテキストでURLがどのようにプレフィックスまたは翻訳されているかを誰かが説明してもらえますか？つまり：

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

どちらも機能しません。では、iOSのPhoneGapで使用されるURLベースは何ですか？

私たちも試しました、例えば：

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

でも行かない.

絶対パスURLはCSS全体で使用され、AjaxコードはSprocketsによってRailsバックエンドなどで設定されているため、URLをポートの相対パスに変更することは避けたいと思います。 iOSでPhoneGap/UIWebViewを取得して、記述されている絶対パスURLを使用してアセットをロードするだけですか？

この質問はStackOverflowでさまざまな形で多く質問されているようですが、正解はまだありません。

iosurluiwebviewcordovasprockets
25
tribalvibes

JavaScriptでアプリケーションへのパスを取得するには、次のようにします。

cordova.file.applicationDirectory

私はAndroidを使用しているので、「file：/// Android_asset /」と表示されます...例：

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

このように、さまざまなプラットフォームのクロスビルド時にすべてのリソースが見つかります。

16
Martin Zeitler

いくつかのテストと、JavaScriptの少しのハッカーが、それをもう少し管理しやすくすることができましたか？これにより、URLが/で始まる<a>および<img>タグがすべて、現在のファイルを基準にして変更されます。

これをファイルに入れ、<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];
  }
});
7
Mattias Wadman

IPhone/iPadの絶対パスを確認すると、次のようになります。

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

また、AndroidまたはWindowsデバイスでは異なるため、この場合は絶対パスを使用してアセットを参照することは実際には良い考えではないと思います。

別の方法として、CSSファイルでbase64文字列の使用を検討できます。

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