Question

我有一个Chrome扩展程序浏览器操作，我希望列出一系列链接，并在当前选项卡中打开任何选定的链接。到目前为止，我所拥有的是使用jquery：

var url = urlForThisLink;
var li = $('<li/>');
var ahref = $('<a href="#">' + title + '</a>');
ahref.click(function(){
    chrome.tabs.getSelected(null, function (tab) {
        chrome.tabs.update(tab.id, {url: url});
    });
});
li.append(ahref);

部分有效。它会导航当前选项卡，但只会导航到上次以这种方式创建的链接。如何为迭代的一系列链接执行此操作？

Answer 1

@ jmort253的回答实际上很好地说明了你的错误。尽管在for循环内声明，url具有函数作用域，因为它是用var声明的。因此，您的单击处理程序闭包绑定到for循环外部的作用域变量，并且闭包的每个实例都使用相同的值，即。最后一个。

一旦Chrome支持let关键字，您就可以使用它而不是var，并且它将正常工作，因为url将作用于{{1}的正文}循环。在此期间，您必须通过在函数中创建闭包来创建新的作用域：

for

在function makeClickHandler(url) { return function() { ... }; }循环中说：

for

Answer 2

在您的代码示例中，您看起来只有一个链接。相反，我们假设您有一个实际的链接集合。在这种情况下，您可以使用for循环来迭代它们：

// collection of urls
var urls = ["http://example.com", "http://domain.org"];

// loop through the collection, for each url, build a separate link.
for(var i = 0; i < urls.length; i++) {

    // this is the link for iteration i
    var url = urls[i]; 

    var li = $('<li/>');
    var ahref = $('<a href="#">' + title + '</a>');
    ahref.click( (function(pUrl) {
        return function() {
            chrome.tabs.getSelected(null, function (tab) {
                chrome.tabs.update(tab.id, {url: pUrl});
            });
        }
    })(url));
    li.append(ahref);
}

我在写原始答案时完全忘记了范围，因此我更新了它以使用基于Matthew Gertner答案的闭包。基本上，在click事件处理程序中，我现在将url变量传递给一个匿名的1参数函数，该函数返回另一个函数。返回的函数使用传递给匿名函数的参数，因此它的状态不受for循环的下一次迭代将改变url值的事实的影响。

Chrome扩展程序仅打开上次分配的网址

2 个答案: