Accessing an element outside of iframe

Question

I have a file: 1.html and an iframe inside it.
I want to access an element (lets say myelement) which exists in 1.html (outside of iframe) from the iframe.
How can I do that?
I tried:

top.getElementById("myelement") top.document.getElementById("myelement")   parent.getElementById("myelement") parent.document.getElementById("myelement") 

but it didn't work!!

Answer 1

Communication between an iframe and parent document is not possible for cross-origin resources. It will only work if the iframe and the containing page are from the same host, port and protocol - e.g. http://example.com:80/1.html and http://example.com:80/2.html

For cross-origin resources, you can make use of window.postMessage to communicate between the two, but this is only useful if the browser supports this method and if you have control over both resources.

Edit - assuming both resources are from the same origin

In the iframe, window.parent refers to the global object of the parent document, not the document object itself. I believe you would need to use parent.document.getElementById

Answer 2

Assuming that same origin policy is not a problem, you can use parent.document to access the elements, and manipulate them.

Demo here, source of outer frame here, source of iframe here.