本地运行网站Safari浏览器资源加载失败问题求助

1. 解决Google相关资源加载失败（网络连接丢失） #

本地运行时Safari对部分Google系CDN的访问可能存在限制，建议将这些资源本地托管：

• 下载对应资源文件：
  • 从jQuery官网下载兼容版本的jquery.min.js
  • 从Google Fonts官网下载所需字体文件（包含css和字体资源）
  • 从Bootstrap官网下载完整的js/css包
• 替换HTML中的CDN链接为本地相对路径，例如：
  原CDN链接：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=XXX&display=swap" rel="stylesheet">
  

  替换为本地路径：

  <script src="./assets/js/jquery.min.js"></script>
  <link href="./assets/css/google-fonts.css" rel="stylesheet">
  

2. 修复ReferenceError: Can't find variable: $ #

这个报错是jQuery未加载成功导致的，除解决上述资源加载问题外，需确保脚本加载顺序正确：

• 将jQuery的<script>标签放在所有依赖它的脚本（比如card-sliding.js）之前，保证jQuery先完成加载。

3. 消除bootstrap.min.js.map 404报错 #

.map文件仅用于调试，不影响页面正常运行，可通过以下两种方式解决：

• 下载对应版本的bootstrap.min.js.map文件，与bootstrap.min.js放在同一目录下
• 编辑bootstrap.min.js，删除最后一行的//# sourceMappingURL=bootstrap.min.js.map代码，阻止浏览器请求该文件

4. Safari本地运行额外建议 #

• 避免使用绝对路径（如C:\xxx\file.js），全部使用相对路径，减少Safari的文件访问限制
• 尝试用轻量本地服务器运行项目：
  • Python用户：在项目根目录执行python -m http.server，通过http://localhost:8000访问
  • Node.js用户：安装http-server后执行http-server，通过对应端口访问
    使用HTTP协议运行可规避file://协议带来的跨域和资源加载限制

内容的提问来源于stack exchange，提问作者Maria