Pergunta sobre getelementsbytagname, javascript, iframe – usando document.getElementsByTagName em uma página com iFrames - elementos dentro do iframe não estão sendo apanhados

4

mais recente para o javascript. Na minha página (aplicativo asp.net, vb como linguagem serverside), estou usando document.getElementsByTagName ("img") para obter todos os itens html com tags img. Eu estou percebendo que um em particular não aparece nesta lista (eu consegui colocá-los em uma matriz e acessar os itens individualmente - código abaixo). Este item está contido dentro de um iframe (o iframe não usa SRC ou qualquer outra coisa, apenas definido então o html dentro dele está ali na fonte, não carrega de outra página - isso é gerado automaticamente por um visualizador de relatórios de cristal gerado em tempo de execução, é por isso que não consigo copiar para mostrar isso). O getElementsByTagName não está captando esta imagem porque está dentro de um iframe? Eu preciso ser capaz de acessar o src img (a imagem é outro item gerado automaticamente a partir do visualizador de relatórios de cristal). Se o motivo pelo qual isso não foi retirado é devido ao iframe, existe alguma maneira de executar isso em itens dentro do iframe? Ou apenas obtenha a propriedade type "innerhtml" para tudo dentro do iframe para que o img src possa ser acessado. Obrigado pela ajuda.

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

Sua resposta

2   a resposta
0

Aqui está uma função que irá retornar um conjunto de todos os elementos a partir de (e incluindo) uma raiz, incluindo iframes quando possível (não CORS) e shadow dom:

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

subtreeSet(document).forEach(elem => { 
  if (elem.style) elem.style.backgroundColor='yellow'; 
});
<div>TOP</div><br>
<div>IFRAME<br><iframe></iframe></div>

Testado apenas no Chrome

6

ento pai.

Para obter algo dentro de um iframe, você precisa acessar o iframecontentDocument. Então, seu código pode ser assim:

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

Perguntas relacionadas