将 JavaScript 代码放在单独的文件中是行不通的

Putting JavaScript code in a separate file does not work

本文关键字：文件 行不通 单独 JavaScript 代码      更新时间：2023-09-26

我正在使用优化指南.js示例代码：

http://jeffpickhardt.com/guiders/

虽然如果我提取 JavaScript 代码并将其放在单独的文件中，指南不会加载。

以下是编辑后的 HTML：

<html>
  <head>
    <!-- guider.js requires jQuery as a prerequisite. Be sure to load guider.js AFTER jQuery. -->
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="guider.js"></script>
    <script type="text/javascript" src="guidedTour.js"></script>
    <link rel="stylesheet" href="guider.css" type="text/css" />
  </head>
  <body>
    <span id="clock" style="border: 2px solid #333; width: 300px; height: 200px; text-align: center;" onclick="guider.next();">
      <br />
      <img src="clock.gif" width=150 height=150 />
    </span>

  </body>
</html>

我有所有的JavaScript代码在guidedTour.js，在同一个目录中。所有.js文件也位于同一目录中。代码在将其提取到单独的文件之前有效。

当 JavaScript 位于单独的文件中时，指南不会加载。

我在 Chrome 中收到以下错误：

"未捕获的类型错误： 无法读取 null 的属性'客户端高度' jquery-1.5.1.min.js：16"

尝试较新版本的 jQuery 会在 guiders.js 上抛出错误。无论如何，这似乎与我将 JavaScript 代码保留在index.html中的行为不同。

我已经为工作代码创建了一个jsfiddle：http://jsfiddle.net/vpMQy/

我不知道如何在单独的文件中使用 JavaScript 创建类似的 jsfiddle，以便我可以重现该问题。

是否可以将此 JavaScript 代码放在单独的文件中？

始终将

代码包装在 DOM 就绪处理程序中

$(document).ready(function() {
    //your code here
});

或它的速记

$(function() {
    //your code here
});

或者将脚本放在文档body的最末尾：

    //...
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="myScript.js"></script>
 </body>

而且在准备好之前操作它们的 DOM 不会有问题。 =]

相关文章：