将javascript保留在外部 - 不起作用
Keeping javascript external - doesn't work
当我将javascript/jquery保留在外部时,我的代码不起作用。 但是当我将它们组合在我的 HTML 文件中时,一切都很好。
关于为什么会这样的任何建议?
这是代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type ="text/javascript" src="jquery.js"></script>
<script type ="text/javascript" src="program.js"></script>
</head>
<body>
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
</body>
</html>
使用外部 JavaScript
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
$("p").click(function () {
$(this).slideUp();
});
对
<!DOCTYPE html>
<html>
<head>
<script type ="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
<script>
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
$("p").click(function () {
$(this).slideUp();
});
</script>
</body>
</html>
我猜你在 DOM 完成加载之前执行点击事件。将代码包装在 dom ready
事件中,它应该可以工作,假设您到外部 javascript 文件的路径是正确的。
$(function(){
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});
$("p").click(function () {
$(this).slideUp();
});
});
如果您遇到任何脚本错误,请始终使用 firebug(控制台)查看脚本出了什么问题。
你的javascript在页面上有元素之前被执行。您可以通过使用$(document).ready(function(){...});
或将外部javascript文件移动到底部来解决此问题。
js 代码包装在外部文件中
$(document).ready(function(){
//your code goes here
});
现在,您将在标头中包含外部js文件并将其执行。此时没有元素,因此$('#clickme')
和$("p")
是空集。在第二个示例中,您将在使用该元素呈现 html 后运行此代码。
存在差异的原因是,在浏览器完全解析 DOM 之前,您的代码正在外部文件中执行,因此您尝试以编程方式访问浏览器尚未意识到的页面元素。这正是大多数人已经说过的,但让我进一步详细说明......
虽然很多人都提到使用jQuery的文档就绪处理程序,但我想指出,一个可行的解决方案是简单地将脚本标签移动到页面底部。
这不仅可以解决您的问题本身,而且还会因为浏览器处理脚本的方式而缩短页面加载时间。当浏览器遇到脚本时,它会停止它正在执行的其他所有操作(称为"阻塞"操作),并解析并执行脚本。这会导致页面从用户的角度来看只是停滞不前,这意味着糟糕的用户体验。因此,由于脚本仅在遇到时解析和执行,因此通过将脚本移动到底部,您可以允许浏览器完全呈现页面,以便 JavaScript 不会阻止呈现。
虽然我不只是将脚本移动到页面底部,我也会遵循其他人的建议,并将整个代码包装在文档就绪处理程序中,只是为了更加安全,您的代码将始终在正确的时间执行。
此外,在内联或外部的争论中,外部脚本通常是首选,因为它们更易于维护,并且浏览器可以独立于页面缓存它们(前提是存在正确的HTTP标头)。
总结一下,下面是一些示例代码:
<html>
<head></head>
<body>
<!-- all your markup here -->
<!-- script at bottom, markup already rendered by this point -->
<script type="text/javascript" src="jquery.js"></script>
<!-- inline or external, still wrap in document ready handler -->
<!-- though external is better because the browser can cache it independently of the page -->
<script type="text/javascript">
//wrap in document ready to be extra safe
$(function() { /*code here*/ });
</script>
</html>
- 外部JavaScript验证不起作用
- 外部JavaScript链接不起作用
- 我的函数不起作用,Ajax调用,JQuery,调用外部?我不知道
- 外部文件中的jQuery函数不起作用
- 如果在外部单击,则隐藏弹出窗口.为什么我的脚本没有'不起作用
- 外部AJAX请求不起作用
- 当我将javascript代码放在外部站点.js文件中时,Ajax页面方法不起作用
- HTML5 Canvas 在外部 JavaScript 文件中不起作用
- JS时钟在外部JS文件中不起作用
- 使用外部JS文件时,Codeigniter ajax请求不起作用
- .php和.html文件和外部文件不起作用
- 将javascript保留在外部 - 不起作用
- 外部Javascript不起作用,即使我正确链接了它(至少我很确定这一点)
- 跟踪像素应该通过引用页面加载外部网站 - 但它不起作用
- 外部 JavaScript 文件在 Rails 中不起作用
- 内联Javascript可以工作,但在外部不起作用
- JSFiddle 外部资源不起作用
- 链接到外部.js文件不起作用
- 外部文件 java 脚本不起作用
- 外部js click函数在Chrome / Safari中不起作用