Вопрос по getelementsbytagname, javascript, iframe – использование document.getElementsByTagName на странице с iFrames - элементы внутри iframe не выбираются

4

новее для JavaScript. На своей странице (приложение asp.net, vb в качестве серверного языка) я использую document.getElementsByTagName (& quot; img & quot;), чтобы получить все HTML-элементы с тегами img. Я заметил, что один из них не отображается в этом списке (я смог поместить их в массив и получить доступ к элементам по отдельности - код ниже). Этот элемент содержится внутри iframe (iframe не использует SRC или что-либо еще, просто определен, тогда HTML внутри него находится прямо в источнике, не загружается с другой страницы - это автоматически генерируется программой просмотра отчетов Crystal, созданной во время выполнения, поэтому я не могу скопировать, чтобы показать это). GetElementsByTagName не подхватывает это изображение, потому что оно находится внутри iframe? Мне нужно иметь доступ к этому источнику изображений (изображение - это еще один автоматически сгенерированный элемент из средства просмотра отчетов Crystal). Если причина, по которой это не обнаружено, связана с iframe, есть ли способ запустить это для элементов внутри iframe? Или просто получите & quot; innerhtml & quot; Свойство type для всего внутри iframe, чтобы можно было получить доступ к img src. Спасибо за помощь.

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

Ваш Ответ

2   ответа
6

что элементы в iframes не являются частью родительского документа.

Чтобы получить что-нибудь внутри iframe, вам нужно получить доступ к iframe'scontentDocument. Итак, ваш код может выглядеть та

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

и включая) корень, включая iframes, где это возможно (не CORS) и 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>

Испытано только в Chrome

Похожие вопросы