用iFrame替換多個鏈接通過Javascript

我想解析一個頁面，用javascript來替換屬於一個特定的類與一個iframe的鏈接，以打開相應的維基百科頁面[這樣，而不是有一個鏈接，你有一個嵌入結果]。該函數正確檢測鏈接，但有關replaceChild（）操作會導致它跳過下一個實例...就好像它執行了第一個替換，然後認爲下一個鏈接是它剛剛工作的鏈接，可能是因爲循環。用iFrame替換多個鏈接通過Javascript

例如，如果頁面上有兩個鏈接，第一個將解析，第二個將不會被看到，但如果有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);  
     } 
    } 
})();

來源

2012-01-20 Ted S

這裏的問題是document.getElementsByTagName返回一個NodeList而不是一個數組。一個NodeList仍然連接到實際的DOM，你不能安全地迭代它的條目，同時從DOM中刪除條目（就像你在替換鏈接時一樣）。

您需要的節點列表轉換成數組，並使用迭代數組：

(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);  
     } 
    } 
})();

來源

2012-01-20 02:06:13

尼斯抓，+1。 – TERMtm

具有完美的感覺......並且代碼立即工作。感謝您背後的代碼示例和解釋。 –

根據the MDN documentation：

返回具有給定標記名稱的元素列表。搜索指定元素下的子樹，排除元素本身。返回的列表是實時的，這意味着它會自動使用DOM樹進行自我更新。因此，不需要使用相同的元素和參數多次調用element.getElementsByTagName。

因此，每當您更換一個a時，收集會縮小。每當您進行替換時，您都可以更改循環以減少i。

來源

2012-01-20 02:01:15 Jacob

用iFrame替換多個鏈接通過Javascript

回答

相關問題