2012-01-31 178 views
22

移植的web应用的PhoneGap iOS上,我们拥有的资产(和Ajax)是绝对路径的网址,例如:iOS上的PhoneGap具有资源的绝对路径URL?

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

我们的PhoneGap的www目录下包装的IMG目录。图像不会使用绝对路径加载,但只使用相对路径,例如:

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

可能有人请解释如何URL被前缀或在此背景下翻译? I .: .:

<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这里以各种形式被问到很多,但我还没有看到正确的答案。

+4

假设它是一个单页面的应用程序(通常建议用于PhoneGap/Cordova),任何原因你不能只在你的index.html中使用并且将其称为一天? – Trott 2013-11-14 06:11:19

回答

3

当检查通过您的iPhone/iPad的绝对路径,你会看到这样的内容:

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

这将是不同的AndroidWindows设备,所以我不认为它实际上是一个好主意,在这种情况下使用绝对路径引用资产。

正如你可以考虑在你的CSS文件使用base64字符串替代:

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

谢谢。是否有一个PG API来咳嗽当前文档根目录的绝对路径?我们确实为某些图片使用了数据网址,但这不是一个通用的解决方案。 – tribalvibes 2012-01-31 20:19:28

+1

'PhoneGap'具有用于文件操作的公开API,但是我没有机会使用它:http://docs.phonegap.com/en/1.0.0/phonegap_file_file.md.html#File – MonkeyCoder 2012-01-31 20:22:28

+0

using @ mattias的方法我看到我们可以从DOM获得最初的绝对路径并从那里开始。 – tribalvibes 2012-01-31 20:26:41

7

做了一些测试,也许有点JavaScript的两轮牛车可以让多一点管理。这将更改所有<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]; 
    } 
}); 
+0

嗯,这是一个不错的方法,但不确定在这个时间上将会起作用,因为它需要修改主页上所有其他包含的路径。也许更好的攻击PG只是删除领先的'/'...看着这个。 – tribalvibes 2012-01-31 20:20:42

+0

是的,这可能是一个问题。但请注意,iOS上的PhoneGap或多或少只是一个'UIWebView',因此您最终会遇到同样的问题。我认为你必须动态地重写HTML代码(模板系统?),或者还要拦截链接点击......我还没有弄清楚如何。让我知道你的进步。 – 2012-01-31 21:23:38

+2

在这个阶段,由于它只是我们自己的格式良好的HTML,所以构建管道中的一个简单的sed脚本就完成了这个技巧。 sed -e/href =“\ // href =”/ – tribalvibes 2012-02-04 01:48:23

14

一个注入它可以通过获得在JavaScript的应用程序路径:因为我

cordova.file.applicationDirectory 

在Android上,它说:“file:/// android_asset /”...例如:

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

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

+1

这不适用于iOS 8 – Mirko 2015-01-12 17:21:42

+1

无论哪个平台,Cordova JS层都是一样的。请在关于您的iOS问题的“天才吧”上抱怨,这不完全是我的错。 – 2015-01-16 01:12:48

+1

这是一个科尔多瓦的错误,至少在iOS上的3.7,因为我在我的答案在这里解释http://stackoverflow.com/questions/27905969/load-assets-from-www-folder-on-ios-8- with-cordova-3-7-file顺便说一句,我没有抱怨,只是说。 – Mirko 2015-01-16 15:30:54