通过Javascript用iFrame替换多个链接时出现问题

Question

我试图用javascript解析一个页面，用iframe替换属于特定类的链接，以打开相应的维基百科页面[这样就不会有链接，而是嵌入了结果]。该函数可以正确检测链接，但replaceChild（）操作会导致它跳过下一个实例。。。就好像它做了第一个替换，然后认为下一个链接就是它刚刚处理过的链接，这可能是循环的结果。

例如，如果页面上有2个链接，第一个链接将被解析，第二个链接甚至看不到，但如果有3个链接，前两个链接将使用第一个和第三个链接的属性进行解析。

有人能提出一种不依赖计数函数的替代链接循环方式吗？也许将它们添加到数组中？

示例链接

<a href="http://www.foo.com/" class="myspeciallinks" data-searcht="the hoover damn">wiki it</a>

示例Javascript

(function(){    
    var lnks = document.getElementsByTagName("a");
    for (var i = 0; i < lnks.length; i++) {     
        lnk = lnks[i]; if(lnk.className == "myspeciallinks"){       
            newif=document.createElement("iframe");
            newif.setAttribute("src",'http://www.wikipedia.com');
            newif.style.width="500px";
            newif.style.height="100px";
            newif.style.border="none";
            newif.setAttribute("allowtransparency","true");
            lnk.parentNode.replaceChild(newif,lnk);     
        }   
    }   
})();

Answer 1

这里的问题是document.getElementsByTagName返回的是NodeList，而不是数组。NodeList仍然连接到实际的DOM，您无法安全地迭代其条目，同时从DOM中删除条目（就像替换链接时一样）。

您需要将NodeList转换为一个数组，并使用该数组进行迭代：

(function(){    
    var lnksNodeList = document.getElementsByTagName("a");
    // create an array from the above NodeList and use for iteration:
    var lnks = Array.prototype.slice.call(lnksNodeList);
    for (var i = 0; i < lnks.length; i++) {     
        var lnk = lnks[i];
        if (lnk.className == "myspeciallinks") {       
            var newif = document.createElement("iframe");
            newif.setAttribute("src", 'http://www.wikipedia.com');
            newif.style.width = "500px";
            newif.style.height = "100px";
            newif.style.border = "none";
            newif.setAttribute("allowtransparency", "true");
            lnk.parentNode.replaceChild(newif, lnk);     
        }   
    }   
})();

Answer 2

根据MDN文档：

返回具有给定标记名称的元素列表。将搜索指定元素下面的子树，不包括元素本身。返回的列表是活动的，这意味着它会自动使用DOM树更新自己。因此，不需要使用相同的元素和参数多次调用element.getElementsByTagName。

因此，每次替换a时，集合都会收缩。无论何时进行替换，都可以将循环更改为递减i。