javascript - 动态设置链接的目标没有任何作用

Question

我正在编写一个网页(用 PHP，尽管这个问题不涉及 PHP 本身)，它存储 URL 并允许您对其应用标签，从而让您可以通过标签搜索 URL。

我尝试添加一个功能来设置一个复选框，以定义 URL 是在新选项卡中打开还是在默认情况下使用一堆 JavaScript 和 cookie 在同一选项卡中打开。该复选框在页面加载之间正确保留其状态，但没有给任何链接指定 target="_blank"。

我已经为所有 URL 提供了“出站”类，并使用稍微未记录的 document.getElementsByClassName() 函数来获取此类的所有链接，并且我已经验证了这部分的工作原理，因为它是返回一个链接数组，其大小与页面上的 URL 数量相同。

这是我正在做的事情的示例:

function onload() {
    newtab = readCookie("newtab");
    if (newtab == null) {
        createCookie("newtab", "true");
        newtab = "true";
    }
    newtab = (newtab == "true");
    updateLinks(newtab);
}
function updateLinks(newtab) {
    if (newtab)
        target="_blank";
    else
        target="";
    for (link in document.getElementsByClassName("outbound")) {
        link.target = target;
    }
}
function checkboxToggled(checkbox) {
    updateLinks(checkbox.checked);
}

在循环遍历所有链接之前，我已验证 updateLinks() 中是否正确设置了“目标”。有人对可能失败的地方有什么建议吗？

我已经在 Google Chrome(我的主要浏览器)和 Firefox 上对此进行了测试，但它都无法正常工作。(奇怪的是，Firefox 给我一个“太多递归”错误)

Answer 1

这里有几个问题，尤其是您根本没有在元素上实际设置 target (您将其设置在临时字符串上；详细信息如下)。

我强烈建议不要在 NodeList 上使用 for..in，这就是您在这里所做的:

for (link in document.getElementsByClassName("outbound")) {

for..in 循环遍历对象的所有可枚举属性。 (无论如何，link 将是属性名称，而不是属性值。)我会明确地遍历它:

var index, list;
list = document.getElementsByClassName("outbound");
for (index = 0; index < list.length; ++index) {
    link = list[index];
    // ...
}

另请注意，并非所有浏览器都支持 getElementsByClassName。