0

我正在根据此处找到的教程在 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 已加载。

4

4 回答 4

1

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

您使用jQuery告诉jQueryjQuery.noConflict(true)，您不仅要恢复在jQuery加载之前设置的，而且要恢复.truewindow.$window.jQuery

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

Uncaught TypeError: undefined is not a function jquery.fancybox.pack.js?v=2.1.5:2

然后你有这个错误信息：

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

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

关于最后一条错误消息：

未捕获的类型错误：对象 [object 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();.

编辑

对于小部件代码，我建议您自己托管所有库或使用支持 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();

 });
于 2013-10-24T05:07:34.353 回答
0

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

所以流程是

  • 包括 jQuery（无需检查，如果它是第一件事）
  • 包括花式盒子
  • 使用文档准备初始化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>
于 2013-10-24T04:18:56.097 回答
0

尝试这个，

<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>
于 2013-10-24T04:21:29.037 回答
0

您需要确保您在网页上执行的任何 javascript 都在“我们可以在此处使用 jQuery 1.4.2”部分内。如果它在该部分之外，浏览器将无法识别 jQuery。

于 2013-10-24T04:15:24.367 回答