Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在Javascript ( js )文件中加载的jQuery

在Javascript ( js )文件中加载的jQuery
EN

Stack Overflow用户
提问于 2010-11-19 17:54:22
回答 4查看 666关注 0票数 1

这是一个非常简单的脚本,可以加载jQuery。我可以在Firebug Scripts选项卡中看到jquery正在加载,但是当我尝试使用它时,我得到了'$ is not defined‘的错误。

代码语言:javascript
运行
AI代码解释
复制
//function to add scripts
function include(file)
{
    var script  = document.createElement('script');
    script.src  = file;
    script.type = 'text/javascript';
    script.defer = true;     
    document.getElementsByTagName('head').item(0).appendChild(script);
}
//add jQuery
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');

//See if jQuery is working
$(document).ready(function() {
    $('#internal').show();
})

////////////
//RETURNS: "$ is not defined $(document).ready(function() {"

奇怪的是,如果不尝试在相同的脚本中使用jQuery,而是加载另一个使用jQuery的js文件,它确实可以工作

代码语言:javascript
运行
AI代码解释
复制
//function to add scripts
function include(file)
{
    var script  = document.createElement('script');
    script.src  = file;
    script.type = 'text/javascript';
    script.defer = true;     
    document.getElementsByTagName('head').item(0).appendChild(script);
}
//add jQuery
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');

//add my custom script that wants to use jQuery
include('scripts/testScript.js')

testScript.js

代码语言:javascript
运行
AI代码解释
复制
$(document).ready(function() {
    $('#external').show();
})

我很感谢你对此的建议。

EN

回答 4

Stack Overflow用户

发布于 2010-11-19 17:56:35

我猜这是因为浏览器在执行完当前文件后,只会执行您添加的脚本节点中的JavaScript。

浏览器将在一个线程中执行当前脚本。当它到达脚本的末尾时,它将执行DOM中的下一个脚本。它无法停止运行一个脚本以跳转到下一个脚本。

你可能想看看谷歌的JavaScript loader。其工作方式是告诉它加载一个外部js文件,并注册一个回调以在加载该文件时执行。

您可以使用回调来完成此操作,因为回调中的代码只有在浏览器执行完当前文件并移到下一个文件之后才会执行。然而,你不能做的是让浏览器从一个js文件动态切换到另一个(即当它第一次执行文件的内容时)。

票数 5
EN

Stack Overflow用户

发布于 2010-11-19 18:07:46

正如在其他答案中所解释的,jquery是异步加载的,所以当您调用$(document).ready()时,jquery仍然是净加载的。您可以通过将您自己的代码添加到script-element的onload事件处理程序来避免这种情况:

代码语言:javascript
运行
AI代码解释
复制
function include(file){
  var script  = document.createElement('script');
   script.src  = file;
   script.type = 'text/javascript';
   script.defer = true;
   script.onload= function(){
      $(document).ready(function() {
        //your code here
      })
   }
   document.getElementsByTagName('head').item(0).appendChild(script);
 }
//add jQuery
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');

请看这里的示例:http://jsfiddle.net/CrReF/

票数 1
EN

Stack Overflow用户

发布于 2010-11-19 18:02:28

当您像这样动态添加脚本文件时,直到执行完javascript的其余部分,该文件才会执行;因此,在本例中,一个jQuery源代码被下推到jQuery代码下,因此返回未定义。

代码示例2之所以能够工作,是因为您有两个动态添加的文件,它们被按添加顺序下推到底部,因此jQuery源代码将执行,然后它将执行您的jQuery代码。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4227909

复制
相关文章

相似问题

Javascript:在JS文件中加载外部JS文件

22

在中通过jQuery $ajax加载js文件

10

在我的javascript中加载JQuery.js

10

Javascript:在JS文件中加载javascript依赖项

23

有没有同步加载JS文件的JavaScript或jQuery方法?

33
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档