Question

我有一个java脚本，它嵌入在带有脚本标记的html文件中，并且工作正常。 javascript代码用于在单击链接时平滑滚动到页面顶部。

<script type="text/javascript">

 $(".scroll").click(function(event){
 event.preventDefault();
 //calculate destination place
 var dest=0;
 if($(this.hash).offset().top > $(document).height()-$(window).height()){
      dest=$(document).height()-$(window).height();
 }else{
      dest=$(this.hash).offset().top;
 }

 //go to destination
$('html,body').animate({scrollTop:dest}, 1200,'swing', function() {
    $('input#Name_First').focus();
});

});
</script>

但是当我尝试将它作为外部java脚本时，它不起作用。

<script type="text/javascript" src="$!{cdnServerPath}css/lp/js/action.js"></script>

action.js文件中的代码

 $(".scroll").click(function(event){
 event.preventDefault();
 //calculate destination place
 var dest=0;
 if($(this.hash).offset().top > $(document).height()-$(window).height()){
      dest=$(document).height()-$(window).height();
 }else{
      dest=$(this.hash).offset().top;
 }

 //go to destination
$('html,body').animate({scrollTop:dest}, 1200,'swing', function() {
    $('input#Name_First').focus();
});

});

以下是我注意到的事情。

我在调用action.js之前包含了jquery -2.1.1.js文件。
正在加载action.js-我在firebug的网络标签中查看了它。
我在action.js中添加了一个随机警报声明。当页面被加密时会被触发，但是当我点击链接时则不会被触发。

我很感激帮助解决这个问题。

感谢。

Answer 1

脚本包含的位置非常重要。如果在头文件中包含代码，则在加载dom之前它将无法访问dom元素，但是，如果将它放在关闭的body标记之前，它将能够立即访问dom元素。

如果您必须将您的包含放在<head>中，那么您将不得不等待DOMContentLoaded事件，使用$.fn.ready方法可以使用jQuery完成此事件。

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

许多最近的教程建议将你的脚本包含在关闭正文标记之前，以允许你的页面内容在javascript加载之前加载，因为加载javascript是一个阻塞动作，这意味着它将停止下载所有其他东西，直到它是完成。将其添加到底部当然也可以不用担心DOMContentLoaded事件。

将所有脚本包含在一起并将样式包含在一起（单独）也是有帮助的，这样它们就可以并行下载。

外部JavaScript加载但不工作

1 个答案: