JavaScript(通过 Greasemonkey)无法在 标签上设置 "title"属性

Question

我有以下(相当)简单的 JavaScript 片段，我已将其连接到 Greasemonkey 中。它遍历一个页面，查找 href 指向 tinyurl.com 的 标记，并添加一个“title”属性来标识链接的真实目的地。许多重要代码来自较旧的(不受支持的)Greasemonkey 脚本，当保存 XPath 实现的内部组件发生更改时，该脚本将停止工作。我的脚本:

(function() {
    var providers = new Array();
    providers['tinyurl.com'] = function(link, fragment) {
        // This is mostly taken from the (broken due to XPath component
        // issues) tinyurl_popup_preview script.
        link.title = "Loading...";
        GM_xmlhttpRequest({
                method: 'GET',
                url: 'http://preview.tinyurl.com/' + fragment,
                onload: function(res) {
                    var re = res.responseText.match("<blockquote><b>(.+)</b></blockquote>");
                    if (re)
                    {
                        link.title = re[1].replace(/\<br \/\>/g, "").replace(/&amp;/g, "&");
                    }
                    else
                    {
                        link.title = "Parsing failed...";
                    }
                },
                onerror: function() {
                    link.title = "Connection failed...";
                }
        });
    };
    var uriPattern = /(tinyurl\.com)\/([a-zA-Z0-9]+)/;
    var aTags = document.getElementsByTagName("a");

    for (i = 0; i < aTags.length; i++)
    {
        var data = aTags[i].href.match(uriPattern);
        if (data != null && data.length > 1 && data[2] != "preview")
        {
            var source = data[1];
            var fragment = data[2];
            var link = aTags[i];
            aTags[i].addEventListener("mouseover", function() {
                if (link.title == "")
                {
                    (providers[source])(link, fragment);
                }
            }, false);
        }
    }
})();

(“providers”关联数组之所以如此设置，是为了让我可以将其扩展以涵盖其他 URL 缩短服务。)

我已经验证，在被检查的链接与模式匹配或不匹配的情况下，所有不同的代码分支都可以正确到达。 没有发生的是对 anchor 标记的“标题”属性的任何更改。我通过 Firebug 观察过这一点，在左右抛出 alert() 调用，但它永远不会改变。在之前的迭代中，所有表达式的形式为:

link.title = "...";

原来是:

link.setAttribute("title", "...");

这也不起作用。我不是 JavaScript 或 Greasemonkey 的新手，但这一个让我难住了!

Answer 1

尝试用此代码替换 if 的主体。

        aTags[i].addEventListener("mouseover", (function(source, fragment)
        {
            return function()
            {
                if (this.title == "")
                {
                    (providers[source])(this, fragment);
                }
            }
        })(data[1], data[2]), false) ; 

注意循环完成后执行aTags = null;。

您的问题是 if 语句 block 不是真正的作用域，任何 var'd 都将属于外部函数作用域。因此，作为事件处理程序提供的内部函数将使用最后一次传递的源、链接和片段。另外，通过维护对 DOM 对象的引用，您可能会因循环引用而导致内存泄漏。

上述方法通过函数调用在每次传递上创建一个新作用域，因此每个源和片段都在其自己的作用域中。它还利用了这样一个事实:作为事件监听器调用的函数具有指向其所附加元素的 this 属性，从而避免了包含 DOM 元素的循环引用。