正确制作可以本地打开的HTML网页项目

AAAAC3NzaC1l

已于 2024-09-19 11:35:30 修改

阅读量749

点赞数 21

文章标签：前端 html5

于 2024-08-21 18:17:50 首次发布

本文链接：https://blog.csdn.net/AAAAC3NzaC1l/article/details/141398530

版权

可以本地打开的HTML网页项目是指在本地计算机上存储的、以HTML为基础语言的网页项目。这意味着您可以使用Web浏览器（如Google Chrome、Firefox等）从您的计算机上打开和访问这些网页。这些HTML网页项目可以是简易工具、名片、个人的网站、博客、简历、电子商务网站等等。通过双击本地的HTML文件即可打开网页，部分该类型的网页允许您可以在没有互联网连接的情况下访问和浏览这些网页。

如果你希望制作一个本地即开即用的小工具，并分享给没有WEB知识的朋友使用，可以参考该文章。

CORS

CORS是跨域资源共享（Cross-Origin Resource Sharing）的缩写。它是一种浏览器机制，允许在一个域名下的Web应用程序访问另一个域名下的资源。在同源策略（Same-Origin Policy）下，浏览器限制了Web页面从不同源（域名、协议、端口）加载资源的能力，而CORS允许服务器声明允许哪些源可以访问它的资源。

同源策略是一种保护机制，它阻止一个源的网页访问另一个源的敏感数据，以避免潜在的安全问题。例如，如果在一个网页中加载了来自不同源的脚本或资源，攻击者可能会利用这个漏洞访问用户的个人信息。

CORS的出现是为了解决跨域访问的问题，它允许服务器决定是否允许来自不同源的请求访问其资源。在服务器端设置CORS策略，可以允许特定的源请求访问资源，从而解除同源策略的限制。

尽管CORS会限制浏览器在一个源下的网页的访问权限，但这是为了保护用户的安全和隐私。在本地打开HTML网页时，如果该网页需要访问来自不同源的资源，浏览器会阻止该请求，以防止潜在的安全风险。

file://协议

file://协议是一种URL协议，用于指定本地文件的路径。它允许用户通过浏览器或其他支持URL的应用程序来访问本地的文件资源。在使用file://协议时，URL的格式通常如下：file:///path/to/file，其中/path/to/file是要访问的本地文件的路径。

需要注意的问题

1. fetch等请求数据的方法不可用

由于使用的是file://协议，fetch等进行网络请求的都会被CORS阻止。但是，并非所有跨域请求都不可以，可以通过html标签导入一些允许跨域访问服务器的资源，如<script src="https://cdndomain/jquery.js">、<img src="http://图床地址/image.jpg">在能够访问网络时都可用。

2. 不能从文件目录导入type="module"的脚本

ES6模块遵循同源策略，类似<script type="module" src="file:///path/to//jquery.js">的脚本必须通过打包程序转化为非模块脚本或打包到完整html中。

3. 路径

相对路径：在HTML文件中，使用相对路径来引用其他文件，例如图片、CSS或JavaScript文件。相对路径指的是相对于HTML文件所在的文件夹的路径。例如，如果你的HTML文件和图片文件都在同一个文件夹中，你可以使用相对路径<img src="./image.jpg">来引用图片。如果在父级或子级目录可以使用"../","dir/xxx"来定位。

推荐：在src中的路径使用"./"定位，其中的"."必须有，否则当你访问如"file://C:/dir/index.html"时，"/"会定位到"C:/"目录下。不利于用户移动文件。

4. 导入非html标签可导入数据

JSON或一些不支持的文件格式，是无法直接导入使用的。可以通过<input type="file">让用户打开或使用类似JSONP的方法，将其包裹在.js文件中，通过回调或将数据挂载到某变量上来获取它。使用类似于<script src="./data/someData.js?callback=xxx">的方式导入。

5. 临时数据存储

在file://协议下浏览器常用存储如indexDB、localStroge都可用，但要注意数据干扰，由于存储都挂载在"file://"下，不同目录的网页可能会被干扰，可以通过命名来解决。如果你确定用户使用的是较新版本的浏览器，可以尝试使用较新的File System Access API。