为什么这个用户脚本在 Opera 中不起作用？

Question

这是我的用户脚本：

// ==UserScript==
// @name           wykopSpamBlock
// @namespace      wykopSpamBlock
// @description    Skrypt ukrywający sponsorowane i polecane wykopy w serwisie wykop.pl 3.0
// @include        http://www.*wykop.pl/
// @include        http://www.*wykop.pl/strona/*
// @include        http://www.*wykop.pl/wykopalisko*
// @include        http://www.*wykop.pl/hity* 
// ==/UserScript==

(function() {

  function block(element) {

    element.style.display = 'none';
    console.log('It works');

  }

  //////////////////////////////////////////////////////////////////////

  var Filter = new RegExp('^http://www.wykop.pl/link/partnerredirect/');
  var Entries = document.getElementById('body-con').getElementsByClassName('entry');
  var Links;

  //////////////////////////////////////////////////////////////////////

  for (i = 0; i < Entries.length; i++) {

    Links = Entries.item(i).getElementsByTagName('div').item(0).getElementsByClassName('content').item(0).getElementsByTagName('header').item(0).getElementsByTagName('p').item(0).getElementsByTagName('a');

    if (Filter.test(Links.item(1).href) || Filter.test(Links.item(2).href)) {
      block(Entries.item(i));
    }

  }

})();

它在 Chrome 和 Firefox (GreaseMonkey) 中工作正常，但在 Opera 中不行。我收到此错误：

User Javascript thread
Uncaught exception: TypeError: Cannot convert 'Entries.item(i).getElementsByTagName('div').item(0).getElementsByClassName('content').item(0)' to object
Error thrown at line 30, column 4 in <anonymous function>():
    Links = Entries.item(i).getElementsByTagName('div').item(0).getElementsByClassName('content').item(0).getElementsByTagName('header').item(0).getElementsByTagName('p').item(0).getElementsByTagName('a');
called from line 11, column 0 in program code:
    (function() {

问题是，出了什么问题？

//edit

对于那些看不懂的人：

// ==UserScript==
// @name           wykopSpamBlock
// @namespace      wykopSpamBlock
// @description    Skrypt ukrywający sponsorowane i polecane wykopy w serwisie wykop.pl 3.0
// @include        http://www.*wykop.pl/
// @include        http://www.*wykop.pl/strona/*
// @include        http://www.*wykop.pl/wykopalisko*
// @include        http://www.*wykop.pl/hity* 
// ==/UserScript==

(function() {

  function block(element) {

    element.style.display = 'none';
    console.log('It works');

  }

  //////////////////////////////////////////////////////////////////////

  var Filter = new RegExp('^http://www.wykop.pl/link/partnerredirect/');
  var Entries = document.getElementById('body-con').getElementsByClassName('entry');

  //////////////////////////////////////////////////////////////////////

  for (i = 0; i < Entries.length; i++) {

    var EntriesItem = Entries.item(i);
    var Div = EntriesItem.getElementsByTagName('div');
    var DivItem = Div.item(0);
    var Content = DivItem.getElementsByClassName('content');
    var ContentItem = Content.item(0);
    var Header = ContentItem.getElementsByTagName('header');
    var HeaderItem = Header.item(0);
    var Paragraph = HeaderItem.getElementsByTagName('p');
    var ParagraphItem = Paragraph.item(0);
    var Links = ParagraphItem.getElementsByTagName('a');

    if (Filter.test(Links.item(1).href) || Filter.test(Links.item(2).href)) {
      block(Entries.item(i));
    }

  }

})();

和错误：

[26.09.2011 20:35:07] JavaScript - http://www.wykop.pl/
User Javascript thread
Uncaught exception: TypeError: Cannot convert 'ContentItem' to object
Error thrown at line 35, column 4 in <anonymous function>():
    var Header = ContentItem.getElementsByTagName('header');
called from line 11, column 0 in program code:
    (function() {

//edit 2

这里是完整的 html 条目。内容从第 21 行开始。

<article class="entry brbotte8 pding15_0  {id:891309}">
  <div class="clr rel">

    <div class="fleft diggbox">
      <a href="http://www.wykop.pl/link/dig/%7E2/891309/55a55552de3fac6ececb6a8933938e71-1317062985/log_ref_0,index,log_ref_m_0,index,log_ref_n_0," class="block tcenter tdnone diggit ">
        <span class="icon inlblk diggcount cff5917 large fbold vtop animated ">
          22
        </span>
        <span class="block action small br3 bre3">
          wykop
        </span>
      </a>
    </div>

    <a href="http://www.wykop.pl/ramka/891309/policjant-strzelil-nastolatkowi-w-twarz-taserem-wideo/" class="image  rel fright">
      <div class="lazy">
        <!--<img src="http://c0692282.3.cdn.imgwykop.pl/hi_34VehOZEwdnDXdwlMEBOWbkmNGIzrPM0.jpg" alt="Policjant strzelił nastolatkowi w twarz taserem [wideo" class="fright border marginleft15" width="104" height="74" />-->
      </div>
    </a>

    <div class="content">

      <header>
        <h2 class="xx-large lheight20">
          <a href="http://www.wykop.pl/ramka/891309/policjant-strzelil-nastolatkowi-w-twarz-taserem-wideo/"  class="link">
            <span class="fbold">Policjant strzelił nastolatkowi w twarz taserem [wideo</span>
          </a>
        </h2>
        <p class="small cc6">
          <a href="http://www.wykop.pl/reklama/" class="link gray" title="Przejdź do Reklama Wykop.pl">
            <span>
              Wykop Poleca
            </span>
          </a> 
          dodany 
          <time title="2011-09-26 19:37:24" datetime="2011-09-26T19:37:24+02:00" pubdate>
            1 godz. temu
          </time> 
          przez 
          <a href="http://www.wykop.pl/ludzie/Saper86/" class="link gray color color-1">
            <span>
              Saper86
            </span>
          </a>
           z 
          <a href="http://www.wykop.pl/link/partnerredirect/891309/policjant-strzelil-nastolatkowi-w-twarz-taserem-wideo/" rel="nofollow" class="link gray" title="Przejdź do Policjant strzelił nastolatkowi w twarz taserem [wideo">
            <span>
              gadzetomania.pl
            </span>
          </a>                                      
          do 
          <a href="http://ciekawostki.wykop.pl/" title="Ciekawostki" class="link gray" rel="nofollow">
            <span>
              Ciekawostki
            </span>
          </a>
          <a href="http://www.wykop.pl/link/891309/policjant-strzelil-nastolatkowi-w-twarz-taserem-wideo/" class="marginleft10 caf small tdnone">
            <span class="icon inlblk comments mini vtop margintop5 ">&nbsp;</span> 
            <span class="hvline  link gray">13 komentarzy</span>
          </a>
        </p>
      </header>

      <p class="lheight18">
        <a href="http://www.wykop.pl/link/891309/policjant-strzelil-nastolatkowi-w-twarz-taserem-wideo/" class="block ce1">
          <span class="c22">Oceńcie sami czy postąpił właściwie</span>
        </a>
      </p>

    </div>

  </div>

</article>

Answer 1

我建议将这一长行的每一部分分解为单独的步骤，并找出 8 个步骤中的哪一个失败，这应该会给您一个线索：

Links = Entries.item(i).getElementsByTagName('div').item(0).getElementsByClassName('content').item(0).getElementsByTagName('header').item(0).getElementsByTagName('p').item(0).getElementsByTagName('a');

我真的不知道是什么导致了问题。它在 jsFiddle 中对我们双方都有效，但在 Greasemonkey 环境中不起作用。您是否有任何其他greasemonkey 脚本正在修改页面并更改您的DOM？

除此之外，我唯一能想到的就是切换到使用 document.querySelectorAll() （当它存在时）。由于 Opera 的最新版本支持这一点，因此可以避免您的代码遇到的任何问题。您可以在此 jsFiddle 中查看示例实现： http://jsfiddle.net/jfriend00/5hJLn/ 。此选择器不会生成与任何 HTML 代码完全相同的结果，但我认为它适用于您拥有的 HTML。如果需要，您可以考虑调整选择器。这个选择器不太脆弱，因为它不像代码那样依赖于各种标签的确切位置。

总体思路（在 jsFiddle 中实现）是这样的：

if (document.querySelectorAll) {
    var Links = document.querySelectorAll("#body-con .content header p a");
    // turn the links we found green just to show that the code executed properly
    for (var j = 0; j < Links.length; j++) {
        Links[j].className = "target2";
    }
} else {

    var Entries = document.getElementById('body-con').getElementsByClassName('entry');


    for (var i = 0; i < Entries.length; i++) {

        var EntriesItem = Entries.item(i);
        var Div = EntriesItem.getElementsByTagName('div');
        var DivItem = Div.item(0);
        var Content = DivItem.getElementsByClassName('content');
        var ContentItem = Content.item(0);
        var Header = ContentItem.getElementsByTagName('header');
        var HeaderItem = Header.item(0);
        var Paragraph = HeaderItem.getElementsByTagName('p');
        var ParagraphItem = Paragraph.item(0);
        var Links = ParagraphItem.getElementsByTagName('a');

        // turn the links we found red just to show that the code executed properly
        for (var j = 0; j < Links.length; j++) {
            Links[j].className = "target";
        }

    }
}

Answer 2

我使用了 getElementsByTagName('div').item(1) 而不是 getElementsByClassName('content').item(0)。有用。我认为 Opera 的 getElementsByClassName 实现一定存在错误。

//编辑

Ehh...现在我遇到了 getElementsByTagName('header').item(0). 相同的错误。

Answer 3

改变你的实施方式。尝试另一种匿名函数的方法并使用 Opera Dragonfly 来测试它。