iOS 上的 PhoneGap 具有资产的绝对路径 URL？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9073953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PhoneGap on iOS with absolute path URLs for assets?
提问by tribalvibes
Porting a web app to phoneGap on iOS, we have asset (and ajax) URLs that are absolute paths, e.g.:
将 Web 应用程序移植到 iOS 上的 phoneGap，我们有绝对路径的资产（和 ajax）URL，例如：
<img src="/img/logo.png">
We have the img directory packaged under PhoneGap's www directory. The image will not load with the absolute path, but only with a relative path, e.g.:
我们把img目录打包在PhoneGap的www目录下。图像不会以绝对路径加载，而只会以相对路径加载，例如：
<img src="img/logo.png">
Could someone please explain how the URL is being prefixed or translated in this context? I.e.:
有人可以解释一下在这种情况下 URL 是如何加前缀或翻译的吗？IE：
<img src="/www/img/logo.png">
does not work either. So what is the URL base used by PhoneGap on iOS?
也不起作用。那么，PhoneGap 在 iOS 上使用的 URL base 是什么？
We've also tried, e.g.:
我们也尝试过，例如：
<img src="file://img/logo.png">
<img src="file:///img/logo.png">
but no go.
但不行。
We would like to avoid changing the URLs to relative for the port, as absolute path URLs are used throughout the CSS, Ajax code, are set by Sprockets with the Rails backend, etc. How can we just get PhoneGap/UIWebView on iOS to load the assets using the absolute path URLs as written?
我们希望避免将 URL 更改为相对端口，因为在整个 CSS、Ajax 代码中使用绝对路径 URL，由带有 Rails 后端的链轮设置等。我们如何才能在 iOS 上加载 PhoneGap/UIWebView使用写入的绝对路径 URL 的资产？
I see this question is asked a lot in various forms here on StackOverflow, but I've yet to see a correct answer.
我看到这个问题在 StackOverflow 上以各种形式被问到了很多，但我还没有看到正确的答案。
回答by Martin Zeitler
One can get the path to the application in JavaScript by:
可以通过以下方式在 JavaScript 中获取应用程序的路径：
cordova.file.applicationDirectory
Since I'm on Android, it says: "file:///android_asset/" ...for example:
由于我在 Android 上，它说：“file:///android_asset/”...例如：
var img_path = cordova.file.applicationDirectory + 'www/img/logo.png';
Like this all resources would be found when cross-building for various platforms.
像这样，在为各种平台交叉构建时，所有资源都会被找到。
回答by Mattias Wadman
Did some testing and maybe a bit of JavaScript hackery can make it a bit more manageable. This will change all <a>and <img>tags with URL starting with / to be relative to the current file.
做了一些测试，也许一些 JavaScript 技巧可以使它更易于管理。这会将所有以 / 开头的 URL<a>和<img>标签更改为相对于当前文件。
Put this into a file and include it with a <script>tag or inject it with stringByEvaluatingJavaScriptFromString:
将它放入一个文件中并包含一个<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];
}
});
回答by MonkeyCoder
When checking the absolute path through your iPhone/iPad you would see something like this:
通过 iPhone/iPad 检查绝对路径时，您会看到如下内容：
<img src="file:///var/mobile/Applications/7D6D107B-D9DC-479B-9E22-4847F0CA0C40/YourApplication.app/www/logo.png" />
And it will be different on Androidor Windowsdevices so I don't think it's actually a good idea to reference assets using absolute paths in this case.
它会在Android或Windows设备上有所不同，所以我认为在这种情况下使用绝对路径引用资产实际上并不是一个好主意。
As an alternative you could consider using the base64strings in your CSS files:
作为替代方案，您可以考虑使用base64CSS 文件中的字符串：
div#overview
{
background-image: url('data:image/jpeg;base64, <IMAGE_DATA>');
background-repeat: no-repeat;
}
