把JavaScript代码在一个单独的文件不起作用
问题描述:
我与Optimizely工作guiders.js示例代码:把JavaScript代码在一个单独的文件不起作用
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>
我在guidedTour.js
所有的JavaScript代码,在同一个目录。 所有.js
文件也位于同一个目录中。代码在单独的文件中解压缩之前工作。
当JavaScript处于单独文件中时,指导不加载。
我收到的Chrome以下错误:
"Uncaught TypeError: Cannot read property 'clientHeight' of null jquery-1.5.1.min.js:16"
尝试jQuery的较新版本上guiders.js
抛出一个错误。 无论如何,它似乎是一个不同的行为,如果我将JavaScript代码保存在index.html
中。
我已经创建了一个工作代码的jsfiddle: http://jsfiddle.net/vpMQy/
我不知道如何在一个单独的文件创建JavaScript的一个类似的jsfiddle,这样我可以重现该问题。
是否有可能把这个JavaScript代码放在一个单独的文件中?
答
始终包裹DOM ready处理程序中的代码
$(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之前不会有问题,准备好了。 =]
嗯...你的外部JavaScript文件有:
@aquinas我删除了
您是否正确地将您的JS包装在DOM准备好的处理程序中?好像你试图从'null'获得'clientHeight',通常意味着你所引用的元素不在DOM中。 – 2012-08-13 16:46:35