iOS上的PhoneGap具有资源的绝对pathURL？

将一个web应用程序移植到iOS上的phoneGap，我们拥有绝对path的资产（和ajax）URL，例如： 

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

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

 <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中使用绝对pathURL，Ajax代码，由具有Rails后端的Sprockets设置，等等。我们如何才能在iOS上获得PhoneGap / UIWebView以加载资源使用绝对pathURL写入？

我看到这个问题在StackOverflow上有很多种不同的forms，但是我还没有看到正确的答案。

我们可以通过以下方式获得JavaScript应用程序的path： 

 cordova.file.applicationDirectory

由于我在Android上，它说：“file：/// android_asset /”…例如： 

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

像这样，所有的资源都可以在跨平台的各种平台上find。

做了一些testing，也许有一些JavaScript hackery可以使它更易于pipe理。 这将改变所有以/开始的<a>和<img>标签，相对于当前文件。

把它放到一个文件中，并用<script>标签包含它，或者用stringByEvaluatingJavaScriptFromString:注入它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]; } });

当通过你的iPhone / iPad检查绝对path时，你会看到这样的东西： 

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

在Android或Windows设备上会有所不同，所以我不认为在这种情况下使用绝对path引用资产是一个好主意。

作为替代scheme，您可以考虑在CSS文件中使用base64string： 

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