Access DOM from 'dynamic' iframe

Question

I'm working on a simple Chrome extensions that alters an existing webpage. Unfortunately the webpage uses some iframes which makes it a bit more difficult to access the DOM.

I want to access the elements from mainFrame but its content seems to be generated dynamically (not really sure how this works). The src refers to blank.htm which is empty.

document.getElementById("mainFrame").contentDocument

This gets the content of the empty blank.htm

<frame src="blank.htm" name="mainFrame" id="mainFrame" title="mainFrame" />

And with this:

document.getElementById("mainFrame")

I can see the DOM, but I don't know how to further select elements. I might be able to access them with ...('mainFrame").childNodes[i] , but I rather select them with their classes or ids.

Answer 1

Iframe dom contents are not accessible from the parent document. Only thing you can do is the reverse one, yaah you can access the parent document's DOM from iframe. Those are all restricted due to security reasons. But you can access them from chrome extension functions(if you are working for chrome extensions).

For more details about accessing iframe content in chrome extension please follow the link