计算类的实例——使用Firebug将jQuery注入第三方网站

Question

我正在访问一个带有评论部分的第三方网页。

网站: http://www.cbc.ca/news/technology/canadian-led-research-looks-to-grow-strawberries-on-mars-1.2704433

评论部分只显示一些评论，并显示一个"显示更多"按钮。我正在写一个脚本，将继续自动按下"显示更多"按钮，直到所有的评论已经显示。一旦"显示更多"按钮不再显示，我想触发一个新功能。

我正试图通过Firebug(2.0.1)和Firefox(30.0)的命令行将我自己的JavaScript"注入"到第三方页面中来实现这一点。

使用Firebug我发现"Show More"按钮的类是vf-load-more。我创建了一个setInterval()函数调用，并且已经能够成功地重复"点击"按钮。

现在我正在尝试实现"注释结束"识别。我是通过计算页面上vf-load-more的实例来做到这一点的。如果没有vf-load-more实例，则启动下一个功能。

numShowMore = $('.vf-load-more').length;
if (numShowMore == 0) {
    clearInterval(interval1);
    nextFunction(); //This function has not been written yet
}

问题: $(".vf-load-more").length;返回undefined。为什么?按钮是页面上的。

完整代码:

//This injects a jQuery reference into the header
var script = document.createElement('script');
script.src = '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
document.body.appendChild(script);
//If jQuery is loaded execute the rest of the code
if (!window.jQuery)
{
  alert('jQuery is GO');
  var numShowMore;
  function clickButton()
  {
    numShowMore = $('.vf-load-more').length;
    alert('numShowMore = ' + numShowMore); //This alert returns "undefined"??
    if (numShowMore == 0) {
      clearInterval(interval1);
      nextFunction(); //This function has not been written yet
    }
    $('.vf-load-more').click();
  }
  var interval1 = setInterval(clickButton, 3000);
}

现在变得奇怪了。如果我让interval继续运行并"点击"Show More"按钮，直到所有评论都显示出来，它最终将停止显示"Show More"按钮。然后，我通过在命令编辑器中运行clearInterval(interval1);来强制间隔停止，然后当我运行以下代码时，它会警告numShowMore = 1，但按钮不再存在。

numShowMore = $('.vf-load-more').length;
alert('numShowMore = ' + numShowMore);

为什么不是0?

Answer 1

我尝试用jQuery替换jQuery $，它工作了。我不知道为什么，但我认为也许jQuery正在与另一个加载在页面上的库发生冲突。

$('.vf-load-more').length;

被

取代

jQuery('.vf-load-more').length;

和

$('.vf-load-more').click();

被

取代

jQuery('.vf-load-more').click();

我也注意到你的代码有问题，在检查jQuery是否加载的if条件中，条件颠倒了，应该是

if (window.jQuery){
//do stuff
}

然而，因为你正在加载一个外部脚本，可能需要一些时间来加载，如果库没有加载，条件可能是假的，所以最好使用setInterval或setTimeout来检查jQuery是否加载，如果加载，然后执行你的代码。

像这样:

//If jQuery is loaded execute the rest of the code
var jqueryCheckTimer = setInterval(function(){
if(window.jQuery){
        clearInterval(jqueryCheckTimer);
         var interval1 = setInterval(clickButton, 3000);
    }
},100);