时间戳

首页 > 解决方案 > jquery 3 就绪功能无法正常工作

javascript - jquery 3 就绪功能无法正常工作

问题描述

下午好！

我从 jquery 1.11.1 移动到 jquery 3.3.1。我在页面上有以下代码：...

<script type="text/javascript">
function onJqueryLoad() {
    $(function () {
        console.log(document.readyState);
        window.app = new App({logsUrl: '3434'});
    });
}
</script>
<script type="text/javascript" src="~/Scripts/jquery-3.3.1.js" defer onload="onJqueryLoad()"></script>
...
// more scripts
...
<script type="text/javascript" src="~/Scripts/Common/App.js" defer></script>

...在控制台中，我看到以下错误：

交互的

jquery-3.3.1.js:3818 jQuery.Deferred 异常：应用程序未定义 ReferenceError：应用程序未在 HTMLDocument 中定义。( http://localhost:53228/:12:35 ) mayThrow ( http://localhost:53228/Scripts/jquery-3.3.1.js:3534:29 ) 在进程 ( http://localhost:53228/脚本/jquery-3.3.1.js:3602:12 ) 未定义

未捕获的 ReferenceError：应用程序未在 HTMLDocument 中定义。((index):12) 在mayThrow (jquery-3.3.1.js:3534) 在进程(jquery-3.3.1.js:3602)

原来是$ (function () {在 App.js 脚本加载之前调用了 的内容，并且 的状态document.readyState是“interactive”。

但是如果你在导入 jquery 时不使用“defer”：

<script type="text/javascript" src="~/Scripts/jquery-3.3.1.js" onload="onJqueryLoad()"></script>

然后控制台将显示状态：“完成”并且不会出现任何问题。状态document.readyState交互说明（https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState）：

文档已完成加载，文档已被解析，但图像、样式表和框架等子资源仍在加载中。

我未能找到有关“交互”状态是否表示所有脚本都已加载的更详细信息。

我在最新版本的 chrome 和 firefox 中检查过，但在 Microsoft Edge 中没有问题。

在 jquery 1.11.1 的早期版本中，没有出现这样的错误。

https://jsfiddle.net/uez1y7ft/4/ - 如果不使用现金，则不时出现错误（ctrl+f5 - 见控制台）。

有什么想法吗？

标签： javascriptjquerydocument-ready

解决方案

是的，这是jquery的问题。您需要使用document.AddEventListener("DOMContentLoaded", function() {...});或修复 jquery 库。你可以在这里看到关于这个问题的讨论：https ://github.com/jquery/jquery/issues/3271

推荐阅读