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

根据the MDN documentation：

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

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

无法通过Javascript使用iFrame替换多个链接

2 个答案: