javascript - Reading parent document from iFrame and changing parent

Question

I'm trying to write a JavaScript application that will load a button up in an iFrame on a page. This application will read the parent document and strip out all images, apply minimal styling and reload the parent with this newly marked up page.

The problem I am having is reading and writing the parent document from the iFrame. Does anyone know of a way to achieve this? I've read up a little on cross-domain messaging but am unsure of the alternatives and which would be best.

Thanks in advance.

Answer 1

You can reference the parent either by using parent or using the top variable that always points to the outer most document.

• parent == parent window
• top == out most window

So for accesing the first div in the parent window

var d = parent.document.getElementsByTagName("div")[0];

But as noted already in the comment, both the outer document and the document in the iframe need to be from the same domain or you will be blocked for security reasons.