如何在 Android 上的 SDCard 上打开 HTML 文件答案

【问题标题】：How to open HTML files on a SDCard on an Android如何在 Android 上的 SDCard 上打开 HTML 文件
【发布时间】：2021-04-22 22:11:30
【问题描述】：

我有一个 HTML 文件以及一些我希望在我的 Android 手机上打开的图像。原因是即使我离线也想访问该文件。我的 HTML 文件位于 外部 SD 卡 上，那么如何打开该文件并使用所有 src="image.png" 代码行？

我可以使用 JavaScript 来解决这个问题吗？

【问题讨论】：

对于低于 11 的 Android，如果您将 <root name="root" path="."/> 添加到 paths-xml 文件以显示 html 文本，则可以将 ACTION_VIEW 与 FileProvider 一起使用。但是抱歉...如果您使用 FileProvider，您的 img 标签将无法工作，因为没有相对路径。

标签： javascript android html file android-sdcard

【解决方案1】：

刚刚在我的手机上用一个简单的 html 文件（文本、链接、图像）对其进行了测试。如果您只需在 Android 文件管理器中导航到该 .html 文件并使用您选择的浏览器打开它就足够了。

使用 Android 内置文件管理器导航到 .html 文件
长按文件直到它显示为选中
在顶部栏上，按三个点 ⋮
在打开的菜单中，按“打开方式”
现在您可以选择要打开文件的应用程序，选择任何浏览器

之后，您的浏览器应该会打开并显示呈现的网站，包括图像、样式等，只要它们位于 .html 文件中定义的正确位置即可。

【讨论】：

如果可行，这听起来是最好的答案。
是的，“如果”。但很可能我从问题中遗漏了一些东西。在网络上的其他一些论坛上，我已经读到有时浏览器本身无法访问 android 上的外部存储。我想这与操作系统有关，因为我所有的浏览器都可以正常访问我的外部存储。 (Lineage OS - Android 10)

【解决方案2】：

您需要重写所有 URL，否则这将导致 HTTP 404...

另一种选择是对所有图像进行 base64 编码和内联。

【讨论】：

【解决方案3】：

如果所有图像都在同一个文件夹中，您能否不使用相对 url？如果我在桌面上打开我的 html 文件 test.html，并且其中包含以下元素：

<img src = "./my-image1.png" />

而my-image1.png 与我的 .html 文件位于同一文件夹中，它将显示。

关键是要包含./。

至于 javascript，您可以使用 javascript 替换整个 html 文件中的所有 src 属性。将所有图像与 .html 放在同一个文件夹中后，尝试这样的操作。

    <script>
        var imageTags = [...document.getElementsByTagName("img")];
        let regex = /([\w\d%]*\.(png|jpg|jpeg|gif))$/
        imageTags.forEach(element => {
            result = element.src.match(regex);
            element.src = "./"+result[0];
        });
    </script>

这样你就不必自己去修改所有的标签了。只需将该脚本添加到页面底部即可。

编辑：阅读一些答案，有人说 SD 卡存储文件的方式与常规目录路径不同，所以我的解决方案可能毫无意义。但我不确定。我觉得值得一试。

它在我的本地浏览器上对我有用。希望它对你有用。

【讨论】：

【解决方案4】：

您需要将所有图片的 URL 更改为您的 Android/SD 卡目录。
像这样：将src="image.jpg" 更改为src="file:////storage/sdcard0/DCIM/image.jpg" **

**：可能因每部 Android 手机而异。检查您的文件管理器等。

【讨论】：