javascript - 为什么以下 jquery 代码在 tampermonkey 中不起作用

Question

我有以下代码片段要由 Tampermonkey 在 Chrome 网站 http://www.thefreedictionary.com/abnormally 上执行

我在页面中独立尝试了它，它可以工作，但不能通过 Tampermonkey 工作。

代码如下:

// ==UserScript==
// @name       linkify span href
// @namespace  http://use.i.E.your.homepage/
// @version    0.1
// @description  enter something useful
// @match      http://www.thefreedictionary.com/*
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js
// @copyright  2012+, You
// @grant      GM_log
// ==/UserScript==
//alert("hello");

jQuery(document).ready (Greasemonkey_main);

function Greasemonkey_main ()
{  
   alert("hjello");

   jQuery("span.hvr").each(function () { jQuery(this).wrap('<a href="/' + jQuery(this).text() + '" style="text-decoration:none;color:inherit" target="_blank"></a>')})
}

为了检查，我还设置了一个警报，该警报有效，但 jquery 一行代码无效。

不知道为什么。请帮忙。

注意:

这一行代码的作用是什么？

它只是用 anchor 标记包裹页面中的每个 span 标记。

如何在该页面中尝试该代码？

添加 jQuery 链接的脚本标签，然后从控制台执行这一行即可工作。

Answer 1

问题是 span.hvr 链接是动态生成的:当页面加载时，它们不存在，但随后脚本会在稍后生成它们。

因此，为了让您的脚本正常工作，它应该首先等待 span.hvr 元素出现，然后再执行任何操作。

以下修改后的脚本应该可以工作:

// ==UserScript==
// @name       linkify span href
// @namespace  http://use.i.E.your.homepage/
// @version    0.1
// @description  enter something useful
// @match      http://www.thefreedictionary.com/*
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js
// @copyright  2012+, You
// @grant      GM_log
// ==/UserScript==
//alert("hello");

jQuery(document).ready(Greasemonkey_main);

function Greasemonkey_main ()
{  
    var isReady = jQuery("span.hvr").length > 0;

    if (!isReady) {
        setTimeout(Greasemonkey_main, 500);
        return;
    }

    jQuery("span.hvr").each(function () {         
        jQuery(this).wrap('<a href="/' + jQuery(this).text() + '" style="text-decoration:none;color:inherit" target="_blank"></a>')
    });
}

如果有些页面可能没有 span.hvr 元素，那么您应该让脚本变得更智能 - 例如，在 5-10 秒后停止重试。