iOS上的PhoneGap具有資源的絕對路徑URL？

移植的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這裏以各種形式被問到很多，但我還沒有看到正確的答案。

來源

2012-01-31 tribalvibes

假設它是一個單頁面的應用程序（通常建議用於PhoneGap/Cordova），任何原因你不能只在你的index.html中使用並且將其稱爲一天？ – Trott 2013-11-14 06:11:19

當檢查通過您的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; 
}

來源

2012-01-31 10:03:18 MonkeyCoder

謝謝。是否有一個PG API來咳嗽當前文檔根目錄的絕對路徑？我們確實爲某些圖片使用了數據網址，但這不是一個通用的解決方案。 – tribalvibes 2012-01-31 20:19:28

'PhoneGap'具有用於文件操作的公開API，但是我沒有機會使用它：http://docs.phonegap.com/en/1.0.0/phonegap_file_file.md.html#File – MonkeyCoder 2012-01-31 20:22:28

using @ mattias的方法我看到我們可以從DOM獲得最初的絕對路徑並從那裏開始。 – tribalvibes 2012-01-31 20:26:41

做了一些測試，也許有點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]; 
    } 
});

來源

2012-01-31 17:26:48

嗯，這是一個不錯的方法，但不確定在這個時間上將會起作用，因爲它需要修改主頁上所有其他包含的路徑。也許更好的攻擊PG只是刪除領先的'/'...看着這個。 – tribalvibes 2012-01-31 20:20:42

是的，這可能是一個問題。但請注意，iOS上的PhoneGap或多或少只是一個'UIWebView'，因此您最終會遇到同樣的問題。我認爲你必須動態地重寫HTML代碼（模板系統？），或者還要攔截鏈接點擊......我還沒有弄清楚如何。讓我知道你的進步。 – 2012-01-31 21:23:38

在這個階段，由於它只是我們自己的格式良好的HTML，所以構建管道中的一個簡單的sed腳本就完成了這個技巧。 sed -e/href =「\ // href =」/ – tribalvibes 2012-02-04 01:48:23

一個注入它可以通過獲得在JavaScript的應用程序路徑：因爲我

cordova.file.applicationDirectory

在Android上，它說：「file：/// android_asset /」...例如：

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

像這樣，當爲各種平臺進行交叉構建時，所有資源都可以找到。

來源

2014-11-23 12:51:07

這不適用於iOS 8 – Mirko 2015-01-12 17:21:42

無論哪個平臺，Cordova JS層都是一樣的。請在關於您的iOS問題的「天才吧」上抱怨，這不完全是我的錯。 – 2015-01-16 01:12:48

這是一個科爾多瓦的錯誤，至少在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

iOS上的PhoneGap具有資源的絕對路徑URL？

回答

相關問題