Javascript 未捕获类型错误:属性';jQuery';对象的属性[object object]不是函数

Javascript 未捕获类型错误:属性';jQuery';对象的属性[object object]不是函数,javascript,jquery,html,Javascript,Jquery,Html,我正在根据找到的教程在jquery上构建一个web小部件 基本上,它检查jQuery是否已加载,否则将加载它。我的小部件只显示一个按钮,onClick显示一个加载iframe的fancybox (function() { // Localize jQuery variable var jQuery; /******** Load jQuery if not present *********/ if (window.jQuery === undefined || window.jQuery.

我正在根据找到的教程在jquery上构建一个web小部件

基本上,它检查jQuery是否已加载,否则将加载它。我的小部件只显示一个按钮,onClick显示一个加载iframe的fancybox

(function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
    if (script_tag.readyState) {
        script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
            scriptLoadHandler();
          }
        };
    } else { // Other browsers
        script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] ||      document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() { 
    jQuery(document).ready(function($) { 
        // We can use jQuery 1.4.2 here

        /**** LOAD FANCYBOX ******/
        $.getScript("fancyboxURL");

        // I also tried loading fancybox here but that didnt work either
        $(".fancybox").fancybox();
    });
}

})(); // We call our anonymous function immediately
加载页面时,我得到以下错误

Uncaught TypeError: undefined is not a function jquery.fancybox.pack.js?v=2.1.5:2
Uncaught TypeError: Cannot read property 'fancybox' of undefined jquery.fancybox-thumbs.js?v=1.0.7:19
Uncaught TypeError: Property '$' of object [object Object] is not a function 
一些尝试

在错误
属性“$”产生的文件中,…
错误当前读取

$(document).ready(function(){
  $(".fancybox").fancybox();
});
从其他线程中,我发现我应该尝试使用

jQuery(function($){
  $(".fancybox").fancybox();
});
但这只给了我对象的属性“jQuery”不是一个函数

我知道代码可以正常工作,因为如果我在html文件中手动包含
jQuery
,它就可以正常工作

我的HTML文件如下:-

<html>
<head>
<!-- IF I UNCOMMENT THE BELOW LINE IT WORKS! Add jQuery library -->
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">    </script>-->
</head>
<body>
<!-- load widget -->
<script src="http://mywidgetURL.../widget/myWidget.js" type="text/javascript"></script>
<div id="widget-container"></div>
</body>
</html>


我在Chrome上检查元素时生成的标记似乎表明jQuery已加载。

您需要确保在网页上执行的任何javascript都在“我们可以在此处使用jQuery 1.4.2”部分中。如果它在该部分之外,浏览器将不知道jQuery。

fancybox小部件使用jQuery。所以在你使用它之前,你必须包含它

因此,流量将是

  • 包括jQuery(如果它是第一件事,则无需检查)
  • 包括fancybox
  • 如上所述,使用DocumentReady初始化fancybox
大概是这样的:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="http://mywidgetURL.../widget/myWidget.js" type="text/javascript"></script>

<script type="text/javascript">
     $(function(){
          $(".fancybox").fancybox();
     });
</script>

$(函数(){
$(“.fancybox”).fancybox();
});
试试这个

<script>
   // code to load jquery version 1.4.2 if not exists
   (window.jQuery && window.jQuery.fn.jquery !== '1.4.2')  || 
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"><\/script>');
</script>
<!-- include your fancybox plugin to work properlly -->
<script src="path_of_your_js_folder/fancybox-plugin.js"></script>
<script>
    // code to initialize your fancybox
    $(document).ready(function(){
       $(".fancybox").fancybox();
    });
</script>

//加载jquery版本1.4.2(如果不存在)的代码
(window.jQuery&&window.jQuery.fn.jQuery!=='1.4.2')||
文件。写(“”);
//初始化fancybox的代码
$(文档).ready(函数(){
$(“.fancybox”).fancybox();
});

至少有三个问题(可能更多)

使用
jQuery.noConflict(true)
true
告诉jQuery,您不仅要恢复jQuery加载前设置的
窗口$
,还要恢复
窗口.jQuery

如果页面上没有加载jQuery,则全局对象
窗口。jQuery
保持
未定义。
要使fancybox正常工作,需要jQuery在globale范围内可用,但在您的情况下并非如此。这就是您收到此错误消息的原因:

未捕获的TypeError:undefined不是函数jquery.fancybox.pack.js?v=2.1.5:2

然后出现以下错误消息:

未捕获的TypeError:无法读取未定义jquery.fancybox-thumbs.js的属性“fancybox”

这表明您加载了
jquery.fancybox thumbs.js
,此时
jquery
在全局范围内不可用(很可能与上面的原因相同),试图访问
fancybox
,因为上面的原因,它没有分配给jquery

关于最后一条错误消息:

未捕获的TypeError:对象[object]的属性“$”不是函数

如果在调用
$(document).ready(…)
时,在发布的代码中发生这种情况,那么这是因为jQuery没有分配给
$
noConflict
)。但是
jQuery(document).ready(…)
main
中应该可以工作(您应该按照错误发生的顺序修复错误,以确保其他错误不是后续错误)

当您解决其他问题时,会出现的另一个问题是:

 $.getScript("fancyboxURL");

 // I also tried loading fancybox here but that didnt work either
 $(".fancybox").fancybox();
$.getScript(“fancyboxURL”)
异步加载脚本,因此在几乎所有情况下,在调用
$(“.fancybox”).fancybox()时都不会加载facnybox

编辑

对于小部件代码,我建议您自己托管所有库,或者使用支持AMD的库和加载程序,您可以在其中为模块创建加载上下文。 我现在可以给你推荐一个,因为我们有自己的加载器

另一个解决方案是自己托管所有jQuery插件,并将它们封装到
回调函数中

诸如此类:

 function myWidgetScript_s7d8f6_fancybox(jQuery, $) {
       //the original code that is in the fancybox.js file
 }
myWidgetScript \[一些数字以避免冲突]\[您修改的脚本的名称]

在你的代码中做一些类似的事情

 jQuery.getScript( "modified.fancybox.js", function() {
       myWidgetScript_s7d8f6_fancybox(jQuery, jQuery);
       jQuery(".fancybox").fancybox();

 });

我不理解你的问题。但是jQuery库应该包含在小部件javascript中。好的,让我编辑我的问题以显示javascript。。。当执行
$(document).ready(..)
代码时,可能会出现以下情况。。。jQuery可能没有加载…你在哪里使用$(document).ready(function(){..code..)?是的,我在“我们可以在这里使用jQuery 1.4.2”部分中加载了所有内容,就像你提到的,但没有起作用。是的,我就是这样做的,或者至少我认为我是这样做的。我编辑了“我们可以在这里使用jQuery 1.4.2”这不是一个小部件代码的最佳解决方案,因为它要求所有的html代码都必须包含在html代码中,以后没有修改的机会。哇,非常感谢你这么多的启发。我现在将尝试逐一解决这些问题。你得到的任何提示都将是我也非常感谢!那么我说的第一件事是让jQuery处于全局范围是对的吗?这对你选择的库没有多大帮助,但是对于小部件,我强烈建议使用支持AMD的库并加载它们,例如,非常感谢。我不是javascript专家,所以RequireJS网站看起来确实很好一开始很难理解。如果您有任何教程或分类,我将非常感激。:)@user1258600更新了我的答案。我不建议将您的
jQuery
fancybox
和所有其他依赖项设置为在全局范围内可用,因为这有很高的冲突风险,或者使您的小部件行为错误,或者破坏其包含的页面。无论如何,如果您在JS I方面没有太多经验t可能不是bes