未捕获的类型错误:对象 [对象对象] 的属性“jQuery”不是函数

Uncaught TypeError: Property 'jQuery' of object [object Object] is not a function

本文关键字：对象 jQuery 函数 属性 类型 错误      更新时间：2023-09-26

我正在根据此处的教程在jquery上构建一个Web小部件。

基本上，它检查是否加载了jQuery，否则会加载它。我的小部件只显示一个按钮，onClick 显示一个加载 iframe 的花哨框。

(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

一些尝试

在错误Property "$" ....错误来自的文件中，它当前读取

$(document).ready(function(){
  $(".fancybox").fancybox();
});

从其他线程中，我发现我应该尝试使用 

jQuery(function($){
  $(".fancybox").fancybox();
});

但这只给了我Property "jQuery" of object is not a function.

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

我的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已加载。

至少有三个问题（可能更多）。

你使用jQuery.noConflict(true)，true告诉jQuery，你不仅要恢复加载jQuery之前设置的window.$，还要恢复window.jQuery。

如果没有在页面上加载 jQuery，则全局对象window.jQuery保持undefined。要使fancybox工作，它需要jQuery在全局范围内可用，而在您的情况下并非如此。这就是您收到此错误消息的原因：

未

捕获的类型错误：未定义不是函数 jquery.fancybox.pack.js？v=2.1.5：2

然后您有此错误消息：

未

捕获的类型错误：无法读取未定义的 jquery.fancybox-thumbs 的属性"fancybox".js

这表明您在全局范围内不可用jQuery的某个地方加载jquery.fancybox-thumbs.js（很可能与上述原因相同），尝试访问由于上述原因而未分配给 jQuery 的fancybox。

关于最后一条错误消息：

未捕获的类型错误：对象 [对象对象] 的属性"$"不是函数

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

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

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

$.getScript("fancyboxURL");异步加载脚本，因此在几乎所有情况下，调用 $(".fancybox").fancybox(); 时都不会加载 facnybox。

编辑

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

另一种解决方案是自己托管所有jQuery插件并将它们包装到callback函数中。

像这样：

 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();
 });
你需要

确保你在网页上所做的任何javascript都在"我们可以在这里使用jQuery 1.4.2"部分。如果它在该部分之外，浏览器将不知道jQuery。

fancybox widget 使用 jQuery。因此，在使用它之前，您必须包含它。

所以流程将是

  • 包括jQuery（不需要检查，如果它是第一件事）
  • 包括花式盒子
  • 使用文档准备初始化花式盒子，如上所述。

像这样：

<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>

试试这个，

<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>
相关文章：