Question

我有一个布局文件，其中我在关闭标记之前包含了Jquery。

//layout.handlebars
<!DOCTYPE html>
<html>
  <head></head>
   <body>
    {{{body}}} // renders the body content
    <script src='/js/jquery-2.2.4.min.js'></script>    
   </body>
</html>

我还有一个特定于页面的javascript（helper.js），可以进行Ajax调用。

<div>Some sample data</div>
<script src="/js/helper.js"></script>

但这里的问题是在页面的末尾加载了jquery，但我在加载jquery之前在外部javascript中引用它。这表明我'$'没有定义，我知道这很明显。

对此的一个解决方案就像将jquery添加到head部分，但这不是我想要的。

是否有任何方法可以应用于从外部文件进行ajax调用而无需将Jquery移动到head部分。

非常感谢任何帮助!!

Answer 1

是否有任何方法可以应用于从外部文件进行ajax调用而无需将Jquery移动到head部分。

是的，我假设您已经了解问题的原因。如下所示，最终内容是..

<!DOCTYPE html>
<html>
  <head></head>
   <body>
    <div>Some sample data</div>
    <script src="/js/helper.js"></script>  <!--Jquery is not loaded yet, and hence $ is undefined -->
    <script src='/js/jquery-2.2.4.min.js'></script>    
   </body>
</html>

如您所知，一个选项是将jquery移动到HTML中的任何位置，但要确保在任何其他jquery相关文件之前加载它。现在既然你不想采取这个选择。我们有另一种选择。

<强>解决方案：我们唯一的目标是确保在任何其他jquery依赖文件之前加载jquery库。

我们可以使用 $.getScript()

在document.ready上获取文件

$(function(){
 $.getScript( "/js/helper.js", function( data, textStatus, jqxhr ) {      
  console.log( "Load was performed." );
 });
});

附加功能：如果您觉得这是一个开销，并且您无法将此代码添加到页面中的所有文件中（因为文件太多），您可以编写一个通用函数和一个全局数组变量，此函数将检查数组中的文件路径并同步执行每个路径并从数组中删除。确保在每个document.ready事件中调用此通用函数。

Answer 2

一个解决方案是你可以在{{{body}}}部分之前将jquery脚本放在body标签的开头。这样你的帮助器脚本将在jquery之后呈现，你的问题将被解决...... ..

Answer 3

嗯，它不漂亮，但你可以使用某种类型的测试和等待循环，如

<script>
(function test(){
  if(  window.jQuery ){
    //your jQuery code
  } else {
    setTimeout(function(){ test(); }, 200);
  }
})
</script>

如何在主体部分加载jquery而不是head部分进行ajax调用

3 个答案: