我有一个非常简单的 HTML 应用程序,使用几个 js 文件、一个 css 和几个图像。我将它们全部捆绑在一个文件夹中,然后将其下载到手机的“下载”文件夹中。
现在,当我转到该文件夹并打开主 html 文件时,它会在 Chrome 浏览器中打开以下网址:content://media/external/file/<10 digit number>,并且不会加载从其本地引用的其他文件。这意味着没有图像,当然也没有js功能。
我应该将文件放在哪里,或者如何从主 html 文件中引用它们,以实现正常的操作过程,在执行主 HTML 文件时通常会加载这些文件?
我知道我可以下载一个小型网络服务器来在本地运行它并使其为页面提供服务,但这对我来说似乎太过分了,我想将其作为最后的选择。
您已将文件放置在合适的文件夹中。
问题是您使用的内容方案 uri 也隐藏了真实文件名。
内容://media/external/file/123456
指向您的 html 文件。如果浏览器必须显示像 image.jpg 这样的图片,它将构建一个像 content://media/external/file/image.jpg 这样的 uri。
但这不是有效的 uri,因为该提供商使用您告诉我们的数字。即使 url 没问题,你也不会有读取权限。
对于那些可能遇到类似情况的人来说,有一种更好的方法可以在移动设备上运行 html + js + css 应用程序。
您只需将它们转换为渐进式 Web 应用程序 (PWA),这意味着只需稍微调整它们并添加清单文件即可。这些应用程序可以直接从浏览器安装在移动设备上,作为本机应用程序运行。
中找到有关此主题的信息将文件移动到其他位置:将 HTML 文件和所有关联的资源(CSS、JavaScript、图像)移动到设备上的其他文件夹,例如“文档”或“内部存储”文件夹。然后尝试从那里打开 HTML 文件。从这些位置访问文件时,浏览器的安全限制可能较少。
使用相对路径访问文件: 确保您使用 HTML 文件中的相对路径引用 CSS、JavaScript 和图像文件。例如,如果您的 HTML 文件与 CSS 文件位于同一文件夹中,请使用类似
<link rel="stylesheet" href="style.css">
的相对路径。
使用文件 URI 方案:您可以尝试使用
file:///
URI 方案来访问 HTML 文件和资源。例如,通过在 Chrome 浏览器的地址栏中键入 file:///path/to/your/file.html
打开 HTML 文件。请务必将 /path/to/your/
替换为 HTML 文件的实际路径。
浏览器设置:检查移动设备上 Chrome 浏览器的设置。可能有一个选项允许本地文件访问或禁用本地文件的安全限制。这些设置可能会根据浏览器和版本的不同而有所不同。
第三方应用程序:Google Play 商店提供第三方文件管理器应用程序和 HTML 查看器,可让您更轻松地使用本地资源打开 HTML 文件。这些应用程序可能会更好地处理本地文件访问。
如果这些选项都不起作用,您可能需要考虑使用本地 Web 服务器作为最后的手段,正如您提到的。这是一种在本地为 HTML 应用程序及其资源提供服务的可靠方法,可确保一切按预期工作,而无需处理浏览器限制。