浏览器扩展中的 jQuery 滑块在 Firefox 中不起作用答案

【问题标题】：jQuery Slider in a browser extension not working in firefox浏览器扩展中的 jQuery 滑块在 Firefox 中不起作用
【发布时间】：2015-12-14 08:03:33
【问题描述】：

我正在创建一个浏览器扩展，我在其中使用 jQuery Range2DSlider 插件 v1.0.5。如果安装在 Chrome 中，滑块可以工作，但不能在 Firefox 中工作。 Firefox 中显示的错误消息是

警告：Node.appendChild 的参数 1 没有实现接口节点。函数名：appAPI.message.addListener 用户回调

当滑块运行器附加到滑块框时会发生此错误。 Range2DSlider 插件中追加跑步者的代码如下。

// create runners
var $runner;
for(i=0;i<_this.values.length;i++){
    if( !_this.$runners[i] ){
        _this.$runners.push($runner = $('<div class="xdsoft_range2dslider_runner xdsoft_range2dslider_runner'+i+'"></div>'));
        $runner.append($inrunner = $('<input type="button">'));
        $runner[0].ranges = [];
        $runner.addClass('xdsoft_range2dslider_'+_this.options.runnerClassSkin.xd(i));
        !function(i){
            $inrunner
                .on('focus',function(){
                    $('.xdsoft_range2dslider_active').removeClass('xdsoft_range2dslider_active');
                    $(this).parent().addClass('xdsoft_range2dslider_active');
                })
                .on('keydown',function( event ){
                    var relX = _this.values[i][0],
                        relY = _this.values[i][1],
                        ax = _this.options.allowAxisMove.xd(0,'both');
                    switch( event.which ){
                        case ARROWUP:
                            if( ax=='both'||ax=='y' ){
                                relY+=_this.options.stepOnKey.xd(1);
                            }
                        break;
                        case ARROWDOWN:
                            if( ax=='both'||ax=='y' ){
                                relY-=_this.options.stepOnKey.xd(1);
                            }
                        break;
                        case ARROWRIGHT:
                            if( ax=='both'||ax=='x' ){
                                relX+=_this.options.stepOnKey.xd(0);
                            }
                        break;
                        case ARROWLEFT:
                            if( ax=='both'||ax=='x' ){
                                relX-=_this.options.stepOnKey.xd(0);
                            }
                        break;
                        default: return true;
                    }
                    setValue(_this,i,relX,relY);
                    event.stopPropagation();
                    event.preventDefault();
                });
        }(i);
    }else{
        for(var t=0;t<_this.$runners[i][0].ranges.length;t++)
            _this.$runners[i][0].ranges[t].rect.remove();
        _this.$runners[i][0].ranges = [];
    }
}

// for second init remove extra sliders
for(i=_this.values.length;i<_this.$runners.length;i++){
    _this.$runners[i].remove();
}
_this.$runners.length = _this.values.length;

if( $.isArray(_this.options.showRanges)&&_this.options.showRanges.length&&_this.values.length>1 ){
    var range,$range ;
    for(i=0;i< _this.options.showRanges.length;i++){
        rangeBetween = _this.options.showRanges.xd(i);
        if( rangeBetween && $.isArray(rangeBetween) && rangeBetween.length && rangeBetween[0]!=rangeBetween[1] && _this.$runners[rangeBetween[0]] && _this.$runners[rangeBetween[1]] ){
            $range = $('<div class="xdsoft_range2dslider_range xdsoft_range2dslider_range'+i+'"></div>');                   
            _this.$runners[rangeBetween[0]][0].ranges.push({rect:$range,rb:rangeBetween});
            _this.$runners[rangeBetween[1]][0].ranges.push({rect:$range,rb:rangeBetween});
            _this.$sliderBox.append($range);
            $range.on('mousedown',function(e){
                e.stopPropagation();
            });
        }
    }
}


_this.$sliderBox
    .css({
        height:_this.options.height,
        width:_this.options.width
    })
    .append(_this.$runners);

任何帮助将不胜感激。提前致谢

【问题讨论】：

消息表示消息监听回调函数出错，具体与appAPI.appendChild有关。查看完整的 extension.js 代码，我可以看到您在多个地方使用 appendChild。我建议您围绕 appendChild 方法开始调试。 [披露：我是 Crossrider 的员工]

标签： jquery firefox browser-extension crossrider jquery-slider

【解决方案1】：

这里的 _this.$runners 是一个 jQuery 对象。 append 方法只接受 DOM 元素。将 jQuery 对象更改为 DOM 元素就可以了。

_this.$sliderBox
    .css({
        height:_this.options.height,
        width:_this.options.width
    })
    .append(_this.$runners[0]);

此代码现在可以使用

【讨论】：