Question

在iOS上将网络应用移植到phoneGap，我们拥有绝对路径的资产（和ajax）网址，例如：

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

我们在PhoneGap的www目录下打包了img目录。图像不会加载绝对路径，而只加载相对路径，例如：

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

有人可以解释在这种情况下URL是如何被加前缀或翻译的吗？即：

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

也不起作用。那么PhoneGap在iOS上使用的URL基础是什么？

我们也尝试过，例如：

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

但没有去。

我们希望避免将URL更改为端口的相对值，因为在整个CSS中使用绝对路径URL，Ajax代码，由带有Rails后端的Sprockets设置，等等。我们如何才能获得PhoneGap / UIWebView iOS使用绝对路径URL加载资产？

我在StackOverflow上看到这个问题有很多种形式，但我还没有看到正确答案。

Answer 1

可以通过以下方式获取JavaScript中应用程序的路径：

cordova.file.applicationDirectory

由于我在Android上，它说：＆＃34; file：/// android_asset /＆＃34; ......例如：

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

像这样，在为各种平台进行交叉构建时，可以找到所有资源。

Answer 2

一些测试和一些JavaScript hackery可以使它更容易管理。这将更改所有<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];
  }
});

Answer 3

通过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;
}

Answer 4

在 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。

iOS上的PhoneGap具有资产的绝对路径URL？

4 个答案: