10

我们有一个广泛使用 jQuery 的网站，它在 Firefox 和 IE 中运行良好。然而，在 Chrome 中，我们经常（和半随机地）获得Uncaught TypeError: Cannot call method 'apply' of undefined（其他 jQuery 方法也出现在 的位置apply）。

我们设法将问题追溯到 jQuery 方法pushStack()。

原始源代码（jQuery 1.7.1）：

// Take an array of elements and push it onto the stack
// (returning the new matched element set)
pushStack: function( elems, name, selector ) {
   // Build a new jQuery matched element set
   var ret = this.constructor();

   // (etc.)
}

检测代码：

pushStack: function( elems, name, selector ) {
   if (!(this instanceof jQuery.fn.init)) throw this;

   // Build a new jQuery matched element set
   var ret = this.constructor();

   if (!(ret instanceof jQuery.fn.init)) {
          console.log("pushStack>this: " + this.constructor);
          console.log("pushStack>ret: " + ret.constructor);
          throw ret;
   }

   // (etc.)
}

在大多数情况下pushStack()运行正确。然而，有时 Chrome 会构造一个类型的对象Object而不是jQuery.fn.init. 控制台输出：

pushStack>this: function ( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
    }
pushStack>ret: function Object() { [native code] }
Uncaught #<Object>

有没有人遇到过类似的问题？它是 Chrome 的（已知）错误吗？

更新

我设法简化了我们的页面，以便它可以自己加载。我在 Chromium 项目项目中填写了错误，复制问题的页面附在此处。

4

2 回答 2

11

Chromium 错误跟踪器中的响应似乎确认这是 Chrome 浏览器的错误。

解决方法是pushStack()在 jQuery 中“修复”函数：

// Take an array of elements and push it onto the stack
// (returning the new matched element set)
pushStack: function( elems, name, selector ) {
   // Build a new jQuery matched element set
   var ret = this.constructor();

   // Workaround for Chrome bug
   if ((this instanceof jQuery.fn.init) && !(ret instanceof jQuery.fn.init)) {
       // console.log("applying pushStack fix");
       ret = new jQuery.fn.init();
   }

   // etc.
}
于 2012-05-23T17:32:22.810 回答
5

这是一个“不引人注目”的解决方案（例如，如果您从 CDN 中提取 jQuery）。将其保存在 .js 文件中，并在拉入 jQuery 后将其包含在内。

(function ($) {
    var pushStackOrig, pushStackChrome;

    pushStackOrig = $.fn.pushStack;

    pushStackChrome = function ( elems, name, selector ) {
        // Build a new jQuery matched element set

        // Invoke the correct constructor directly when the bug manifests in Chrome.
        //var ret = this.constructor();
        var ret = new jQuery.fn.init(); 

        if ( jQuery.isArray( elems ) ) {
            push.apply( ret, elems );

        } else {
            jQuery.merge( ret, elems );
        }

        // Add the old object onto the stack (as a reference)
        ret.prevObject = this;

        ret.context = this.context;

        if ( name === "find" ) {
            ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;
        } else if ( name ) {
            ret.selector = this.selector + "." + name + "(" + selector + ")";
        }

        // Return the newly-formed element set
        return ret;
    };

    $.fn.pushStack = function (elems, name, selector) {
        var ret;

        try {
            ret = pushStackOrig.call(this, elems, name, selector);
            return ret;
        } 
        catch (e) {
            if (e instanceof TypeError) {
                if (!(ret instanceof jQuery.fn.init)) {
                    ret = pushStackChrome.call(this, elems, name, selector);
                    return ret;
                }
            }

            throw e;
        }
    };

}).call(this, jQuery);
于 2012-05-23T21:12:08.163 回答