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

Question

将Web应用程序移植到iOS上的phoneGap,我们拥有绝对路径的资产(和ajax)URL,例如:

<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更改为相对于端口,因为绝对路径URL在整个CSS中使用,Ajax代码,由带有Rails后端的Sprockets设置,等等.我们如何才能在iOS上加载PhoneGap/UIWebView以加载使用写入的绝对路径URL的资产？

我在StackOverflow上看到这个问题在各种形式上有很多问题,但我还没有看到正确的答案.

Answer 1

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

cordova.file.applicationDirectory

由于我在Android上,它说:"file:/// android_asset /"...例如:

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

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

Answer 2

一些测试和一些JavaScript hackery可以使它更易于管理.这将改变以/开头的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];
  }
});

Answer 3

当通过 iPhone/iPad 检查绝对路径时，您会看到如下内容：

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

Android在不同的设备上它会有所不同Windows，所以我认为在这种情况下使用绝对路径引用资源实际上并不是一个好主意。

作为替代方案，您可以考虑使用base64CSS 文件中的字符串：

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