javascript - 如何使用 PhoneGap 保存网页供离线使用？

Question

我正在使用 PhoneGap 开发 RSS 阅读器。到目前为止一切都很好，但现在我想提前下载链接的文章页面，这样用户就不必等待缓慢的连接。

使用 JQuery 通过 AJAX 很容易获取 HTML，但我还需要图像和 CSS。我可以从生成的 HTML 中获取图像和 CSS 的 URL，但路径是相对的。我认为这没有问题，因为我有基本 URL。不幸的是，它并没有我想象的那么简单:

一个示例文章是 http://www.golem.de/news/sicherheit-ecall-soll-motorradfahrern-das-leben-retten-1210-94854.html。包含的 CSS 文件具有相对 URL /staticrl/styles/golem_main_47-min.css。我尝试使用页面 URL 中的最后一个斜杠来查找相对路径的基础(W3C 说这就是它的工作方式)。所以它将是 http://www.golem.de/news/staticrl/styles/golem_main_47-min.css，但实际文件位于 http://www.golem .de/staticrl/styles/golem_main_47-min.css。我也可以在 http:// 之后使用第一个斜杠，这对我尝试的前三个示例都有效，但我很确定这并不总是有效，因为相对 URL 不是这样工作的。但我如何确定碱基是什么？

也许我缺少一种非常简单的方法来做到这一点？我也尝试过使用 IFrame，但 JavaScript 不允许访问跨域 IFrame 内容。

有没有人有过这样的经验？我现在完全卡住了。

Answer 1

我认为您误解了相对 URL 的工作原理。

相对 url 从主机名 (http://www.golem.de) 获取资源。

不是来自主机名 + 最后一个目录路径 (http://www.golem.de/news)。

您需要解析文章 url 并获取主机名，然后将资源路径附加到主机 url。这是获取主机名的示例函数:

var rssUrl = 'http://www.golem.de/news/sicherheit-ecall-soll-motorradfahrern-das-leben-retten-1210-94854.html';

GetHostName(rssUrl) // www.golem.de

function GetHostName(url) {
   return url.match(/:\/\/(.[^/]+)/)[1];
}

您可能想要修改正则表达式以保留协议(protocol) (http://)，或者寻找其他方法从 url 解析主机名。