在帶有iframe的頁面上使用document.getElementsByTagName - iframe中的元素未被拾取

JavaScript更新。在我的頁面（asp.net應用程序，vb作爲服務器端語言），我使用document.getElementsByTagName（「img」）來獲取所有img標記的html項目。我注意到一個特別沒有出現在這個列表中（我可以把它們放入一個數組中並單獨訪問這些項目 - 下面的代碼）。這個項目包含在一個iframe中（iframe不使用SRC或其他任何東西，只是定義了它裏面的html就在源代碼中，不會從另一個頁面加載 - 這是通過生成水晶報表查看器自動生成的在運行時，這就是爲什麼我無法複製來顯示這一點）。 getElementsByTagName是不是拾取這個圖像，因爲它在iframe中？我需要能夠訪問這個img的src（該圖像是Crystal Reports查看器中另一個自動生成的項目）。如果沒有找到原因是由於iframe，有沒有辦法在iframe中的項目上運行此操作？或者只是獲取iframe中所有內容的「innerhtml」類型屬性，以便可以訪問img src。感謝您的幫助。在帶有iframe的頁面上使用document.getElementsByTagName - iframe中的元素未被拾取

var IMGmatches = []; 
     var IMGelems = document.getElementsByTagName("img"); 
     for (var j = 0; j < IMGelems.length; j++) { 
      IMGmatches.push(IMGelems[j]); 
     }

來源

2012-06-21 njj56

這是因爲iframe中的元素不是父文檔的一部分。

要在iframe中獲取任何內容，您需要訪問iframe的contentDocument。所以，你的代碼可能是這樣的：

var IMGmatches = [], IMGelems = document.getElementsByTagName("img"), 
    iframes = document.getElementsByTagName('iframe'), l = IMGelems.length, 
    m = iframes.length, i, j; 
for(i=0; i<l; i++) IMGmatches[i] = IMGelems[i]; 
for(j=0; j<m; j++) { 
    IMGelems = iframes[j].contentDocument.getElementsByTagName("img"); 
    l = IMGelems.length; 
    for(i=0; i<l; i++) IMGmatches.push(IMGelems[i]); 
}

來源

2012-06-21 18:31:58

你先生是他的人生謝謝。這工作 – njj56

這裏是一個將返回一個集合中的所有元素，採用（和包括）根，包括I幀如果可能的話（非CORS）的功能和陰影DOM ：

const subtreeSet = (root, theset) => { 
 
\t if (!theset) theset=new Set(); 
 
\t if (!root || theset.has(root)) return theset; 
 
\t theset.add(root); 
 
\t if (root.shadowRoot) { 
 
\t \t Array.from(root.shadowRoot.children).forEach(child => subtreeSet(child, theset)); 
 
\t } else { 
 
\t \t if (root.tagName === 'IFRAME') { try { root=root.contentDocument.body; theset.add(root); } catch (err) { root=null; /* CORS */ } } 
 
\t \t if (root && root.getElementsByTagName) for (const child of root.getElementsByTagName('*')) subtreeSet(child, theset); 
 
\t } 
 
\t return theset; 
 
} 
 

 
subtreeSet(document).forEach(elem => { 
 
    if (elem.style) elem.style.backgroundColor='yellow'; 
 
});

<div>TOP</div><br> 
 
<div>IFRAME<br><iframe></iframe></div>

僅適用於Chrome測試

來源

2017-08-17 06:25:25 kofifus

在帶有iframe的頁面上使用document.getElementsByTagName - iframe中的元素未被拾取

回答

相關問題