iOS上的PhoneGap带有资产的绝对路径URL？答案

【问题标题】：PhoneGap on iOS with absolute path URLs for assets?iOS上的PhoneGap带有资产的绝对路径URL？
【发布时间】：2012-02-22 20:12:48
【问题描述】：

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

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

我们将 img 目录打包在 PhoneGap 的 www 目录下。图片不会用绝对路径加载，只能用相对路径加载，例如：

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

有人能解释一下在这种情况下 URL 是如何加前缀或翻译的吗？即：

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

也不起作用。那么 iOS 上 PhoneGap 使用的 URL base 是什么？

我们也试过，例如：

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

但是不行。

我们希望避免将 URL 更改为端口的相对 URL，因为在整个 CSS、Ajax 代码中使用绝对路径 URL，由带有 Rails 后端的 Sprocket 设置等等。我们如何才能打开 PhoneGap/UIWebView iOS 使用写的绝对路径 URL 加载资产？

我在 StackOverflow 上看到很多人以各种形式提出这个问题，但我还没有看到正确的答案。

【问题讨论】：

假设它是一个单页应用程序（通常推荐用于 PhoneGap/Cordova），任何原因你不能只在 index.html 中使用并调用它一天？

标签： ios url uiwebview cordova sprockets

【解决方案1】：

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

cordova.file.applicationDirectory

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

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

这样，在跨平台构建时，所有资源都可以找到。

【讨论】：

Cordova JS 层都是一样的，不管是哪个平台。请在“天才吧”投诉您的 iOS 问题，这不完全是我的错。
这是 Cordova 中的一个错误，至少在 iOS 上的 3.7 中，正如我在我的回答中解释的那样 stackoverflow.com/questions/27905969/… 顺便说一句，我没有抱怨，只是说明。
当前版本是v4.0.0...也许考虑升级？可以想象目标 C 部分没有正确地将其暴露给 JS 部分。很抱歉咆哮。
工作并需要文件插件：npmjs.com/package/cordova-plugin-file
对于初学者，请提及它需要npmjs.com/package/cordova-plugin-file

【解决方案2】：

进行了一些测试，也许一些 JavaScript 黑客可以使它更易于管理。这会将所有以 / 开头的 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];
  }
});

【讨论】：

hmm，一个不错的方法，但不确定时机是否可行，因为它需要修改主页上所有其他包含的路径。也许更好地破解 PG 以删除前导 '/'... 调查。
是的，这可能是个问题。但请注意，iOS 上的 PhoneGap 或多或少也只是 UIWebView，因此您最终会遇到同样的问题。我认为您必须动态重写 HTML 代码（模板系统？），或者还以某种方式拦截链接点击......我不知道如何。让我知道你的进展。
在这个阶段，因为它只是我们自己的格式良好的 HTML，构建管道中的一个简单的 sed 脚本就可以了，例如sed -e /href="\//href="/
使用 sed 的想法很棒。比运行时的东西可靠得多。但不是 sed 我做了一个科尔多瓦钩子并使用带有replace package的节点。

【解决方案3】：

通过 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;
}

【讨论】：

谢谢。是否有 PG API 可以找出文档根目录的当前绝对路径？我们确实为某些图像使用了数据 url，但这不是一个通用的解决方案。
PhoneGap 有一个用于文件操作的公开 API，但我还没有机会使用它：docs.phonegap.com/en/1.0.0/phonegap_file_file.md.html#File
使用@mattias 的方法我看到我们可以从 DOM 中获取原始绝对路径并从那里开始。

【解决方案4】：

在 ionic 5 / angular 12 我有
this.file.applicationDirectory+'/www/assets/pdf/my.pdf'
它适用于我的应用程序 https://ionicframework.com/docs/native/file https://ionicframework.com/docs/native/document-viewer.

【讨论】：