0

我正在开发一个在我无法控制的框架内运行的小部件。我的小部件使用最新版本的 jQuery，其中框架使用了一些相当可怕的旧版本。

最近我的代码遇到了一些问题，我（最终）发现这是一个 jQuery 冲突问题。

小部件格式有点奇怪，在这个框架/模板中作为 iframe 运行。

它使用该widget.onload函数而不是任何 jQuery 文档就绪函数。我倾向于在那里运行一个或两个函数来初始化一个单独的类。

<script type="text/javascript">
//<![CDATA[

    MyClass = {
        init : function() {
            // Where I build my "pseudo-class"
        }
    }

    widget.onLoad = function(){
        /* My code goes here */

        MyClass.init();
    };

//]]>
</script>

这不是问题 - 它只是上下文 - 通常我可以正常运行 jQuery，如下所示：

widget.onLoad = function(){
    /* My code goes here */

    var id = $('a.student_iframe_popup').attr("id");
    MyClass.init(id);
};

我还在我的小部件中引用其他脚本，就像在 javascript 中一样：

<script type="text/javascript" src="/user/74/187887.js"></script> <!-- jQuery 1.10.2 -->
<script type="text/javascript" src="/user/74/188165.js"></script> <!-- jQuery bPopup -->
<script type="text/javascript" src="/user/74/188166.html"></script> <!-- Student Flags Iframe Popup -->

我链接的最后一个脚本只是一个简单的函数，我打算在我的许多小部件脚本中使用它：

  $('body').on("click", ".student_iframe_popup", function() {
        $('body').append('<iframe></iframe>');

    var student_id = 'student_' + $(this).attr("id");

    $('iframe').attr("width", 800);
    $('iframe').attr("height", 600);
    $('iframe').attr("id", student_id);
    $('iframe').attr("src", '/index.phtml?d=825090');

    $('iframe').bPopup({
        modalClose: true,
        escClose: true,
              opacity: 0,
        position: ['auto', 10]
    });
  });

这一切都很好 - 除了在 IE 中，使用我的一些小部件，我得到随机错误。如果我更改我的代码以利用以下...

widget.onLoad = function(){
    /* My code goes here */
    jQuery.noConflinct();

    var id = jQuery('a.student_iframe_popup').attr("id");
    MyClass.init(id);
};

并将我引用的脚本从更改$为jQuery一切正常 - “错误”神奇地消失了。

然而，我在我的脚本中使用了很多美元符号，现在我已经用所有东西CTRL+H代替了，这变得更加难以阅读，我自然会花费更长的时间来输入新代码。$jQuery

如果我正在编写一个普通的 HTML/JS 文档，我知道我可以使用以下代码继续使用$(blah)，而不是jQuery(blah)：

jQuery( document ).ready(function( $ ) {
    // You can use the locally-scoped $ in here as an alias to jQuery.
    $( "div" ).hide();
});

但由于我没有使用文档就绪功能，我不知道如何实现 noConflict 的变体。

谁能提供一个更好的替代方案，可以在我的小部件框架内工作？

4

1 回答 1

1

您不必使用ready()，您只需创建一个闭包并将 jQuery 作为参数传递：

jQuery.noConflict();

(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);

jQuery 文档

附加说明：加载顺序在这里很重要，如果jQuery.bPopup正在加载 jQuery 的附加版本（根据您的解释，它听起来是这样），它将覆盖 jQuery（除非它本身以无冲突模式加载 jQuery）。您可能需要在加载 jQuery 1.10 之后，但在加载插件的标记之前执行一些操作：<script>

// --- before jquery.bPopup is loaded
var jQ-1.10.2 = jQuery.noConflict(true); // alias jQuery-1.10.2

(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery-1.10.2
  });
})(jQ-1.10.2);

// --- after jQuery.bPopup is loaded
// outside of closure $ refers to jQuery.bPopup version of jQuery
于 2013-09-19T14:15:05.177 回答