webfont.min.js 404加载失败引发WebFont未定义报错问题
报错原因
两个报错存在直接因果关系:
webfont.min.js404错误:该文件是Web Font Loader网页字体加载库的压缩版本,404状态说明服务器找不到这个文件。你贴出的当前视图代码里没有任何引用该文件的代码,所以错误引用源不在当前视图,一般来自共享布局页_Layout.cshtml、全局脚本捆绑配置BundleConfig.cs,或是你使用的后台UI模板自带的全局脚本引用——要么是引用路径写的相对路径解析错误,要么是部署时漏把webfont.min.js文件放到项目对应资源目录下。WebFont is not defined引用错误:这是前一个404错误的连锁反应。webfont.min.js正常加载后才会在全局作用域注册WebFont对象,供后续脚本调用加载自定义字体、图标字体。因为文件加载失败,全局不存在该对象,执行到调用WebFont的代码时就会抛出未定义错误。
修复步骤
- 定位错误引用位置
打开浏览器开发者工具的「网络」面板,筛选JS类型请求,找到加载失败的webfont.min.js条目,查看它的完整请求路径,对照你项目的脚本资源目录(传统ASP.NET MVC一般是~/Scripts目录,.NET Core MVC是~/wwwroot/js目录),找到配置错误的引用位置。 - 按实际场景修复
- 如果是路径配置错误:将引用路径改为站点根目录开始的绝对路径,ASP.NET MVC中推荐用
@Url.Content()方法生成路径,避免多级路由下相对路径解析失效,示例:
<!-- 错误的相对路径写法,子页面路由下容易解析出错 --> <script src="js/webfont.min.js"></script> <!-- 正确的路径写法 --> <script src="@Url.Content("~/Scripts/webfont.min.js")"></script>
- 如果是项目中根本不存在
webfont.min.js文件:要么将对应版本的该文件放到引用路径指向的资源目录下;如果项目不需要自定义网页字体、图标字体的动态加载功能,直接找到全局引用该文件的script标签删除即可,删除后两个报错会同时消失,不会影响当前页面DataTable插件的正常运行。
- 额外优化
你当前视图中的DataTable初始化脚本建议包裹在jQuery DOM就绪回调中,避免DOM未加载完成时执行初始化报错:
<script> $(function () { $('#basic-datatables').DataTable({ searching: false }); }); </script>
同时确认页面已经提前加载了jQuery库和DataTables插件的JS、CSS文件,且加载顺序为jQuery在前、DataTables插件在后,最后才是初始化脚本。
内容的提问来源于stack exchange,提问作者Veck
相关产品推荐
相关产品推荐

