html & js - 从客户端本地路径而不是服务器路径加载资源答案

【问题标题】：html & js - load resources from client local path instead of server pathhtml & js - 从客户端本地路径而不是服务器路径加载资源
【发布时间】：2013-01-23 11:31:31
【问题描述】：

这是我的问题的场景：我有一个网页通过 jquery dom 注入显示一些图像，如下所示：

<!-- this is inside an html page -->
<img id="img1" src="#" />
<img id="img2" src="#" />
<img id="img3" src="#" />

这是我用来加载图像的脚本示例

$("#img1").attr("src", "/img/image1.jpg");
$("#img2").attr("src", "/img/image2.jpg");
$("#img3").attr("src", "/img/image3.jpg");

所以图片的完整路径是 www.mywebsite.abc/img/someImage.jpg

我需要做的是找到一种方法来切换图像源路径，并强制页面从本地（客户端）路径加载它们，例如 c:\something\img。

服务器和客户端的 img 文件夹结构是相同的，所以基本上我认为浏览器只需从服务器“切换”到客户端，从客户端文件夹而不是服务器文件夹中获取图像只要他需要它们。

你认为有可能做这样的事情吗？

提前感谢您的任何建议/回答，如果您需要更多说明，请询问。

最好的问候，再次感谢

【问题讨论】：

标签： javascript html path localhost

【解决方案1】：

一般来说，不，你不能那样做。浏览器的安全功能不会让您的页面访问文件系统上的文件。但是，如果您在控制客户端计算机的有限范围内使用它，则可以使用命令行开关来禁用该安全性。

例如，您可以使用 --allow-file-access 启动 Chrome，然后执行

$("#img3").attr("src", "file://c/something/img/image3.jpg");

不过，我不会推荐它，而且显然普通用户不会以这种方式启动 Chrome。

【讨论】：

【解决方案2】：

您不应该在普通网页/应用程序中需要它。如果您想要节省网络流量，那么您可以使用适当的缓存标头从服务器提供文件。然后，在第一次请求之后，客户端的浏览器将从缓存（文件系统）中检索文件，甚至不会打扰您的 Web 服务器。

有关 HTTP 缓存的综合教程，请参阅 http://www.mnot.net/cache_docs/。

按照你的建议去做有点晦涩难懂，浏览器很可能会阻止它。即使他们不知道，您也永远不会知道客户端可能拥有的文件系统。始终以尽可能与客户端无关的方式开发您的网页/应用程序。

在此之后，如果您出于某种原因仍想这样做，那么这里的其他答案可能会为您指明“正确”的方向。

编辑：

还有另一种可能。 HTML5 具有离线 Web 应用程序的可能性。基本上，您提供了您希望离线使用的资源的列表（清单）。任何支持 HTML5 Offline 的浏览器都会解析此列表并下载和缓存其中列出的文件，即使用户还不需要该特定文件（用户不需要访问网站的每个角落）。在线时，浏览器会自动更新这些文件的副本。

我想这可能就是你要找的东西。

有关更多信息和兼容浏览器列表，请参阅http://diveintohtml5.info/offline.html。

【讨论】：

+1 用于缓存，因为我猜测网络性能是 OP 的动力。
其实我需要让一个用户离线完全访问一个网站，而不必走遍网站的每个角落下载每张图片并缓存。步骤是：用户连接到 www.something.com，下载索引（基于 jquerymobile，所以他需要的每个页面都在索引内），断开与互联网的连接，选择一个可以找到他需要的每张图片的本地路径，浏览离线。我知道这听起来很奇怪..
像file -> save as 一样下载还是像浏览到那个 URL 那样下载它现在显示在浏览器中？因为如果索引也从文件系统中获取，浏览器将愿意通过 file:// 路径加载图像。您会遇到麻烦的地方是索引的来源是 something.com 以及本地文件系统上的所有资产。这行不通。
编辑了答案。请让我知道这是否是您要找的。 :)

【解决方案3】：

我想不出你为什么要这样做，但尝试一下

$("#img1").attr("src", "file:///img/image1.jpg");

或

$("#img1").attr("src", "file://img/image1.jpg");

它可能会起作用

【讨论】：