Question

我是成熟阶段的新项目。其中一个页面上有许多JS脚本和库，jQuery被大量使用。 IE7 / 8中只有一个奇怪的错误：在页面中间某处脚本执行jQuery对象变得未定义，所以其他一切都停止工作。

在HTML中间指定了两个脚本，比如说：

<script src="script1.js"></script>
<script src="script2.js"></script>

在script1的末尾，名为jQuery的变量包含一个预期的对象，但在script2变量jQuery的开头已经未定义。两者之间会发生什么？

请，任何想法在哪里查看以及如何调试！

有没有办法控制脚本执行的后果并在一个页面上调试整个后续js（包括所有js包含）？

谢谢！：）

更新即可。我做了一个补丁：在script1的最后我备份变量：

var jQueryBackup = jQuery;

在script2的开头，我将其恢复：

if (!jQuery && jQueryBackup) jQuery = jQueryBackup;

它使脚本工作，但没有解释变量如何在两个脚本之间变得不确定（我在两行代码之间看到它）。

Answer 1

您的<script>位于HTML中间？尝试将它们放入<head>

<head>
    <script src="script1.js"></script>
    <script src="script2.js"></script>
</head>

Answer 2

如果你想调试，这就是我要做的：

$.getScript("script1.js").done(function(script, textStatus) {
  console.log('script1 is loaded');
  $.getScript("script2.js").done(function(s,t){
     console.log('script1.js is loaded');
  });
})
.fail(function(jqxhr, settings, exception) {
  console.log( "Triggered ajaxError handler." );
});

现在你可以调试它，你也可以使用原生的javascript并使用onload 如果您需要示例，请告诉我。

示例:(此解决方案适用于IE8 +，firefox，chrome）

function handleOnLoad() {
    // do the same here for the script.2 file
}
function IEhandleOnLoad() {
     if (this.readyState === 'complete' || this.readyState === 'loaded') {
           handleOnLoad();
        }
}
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.onreadystatechange = IEhandleOnLoad;
s.onload = handleOnLoad;
s.src = 'script1.js';

Internet Explorer中的JavaScript调试（页面上的所有脚本）

2 个答案: