How do you access the top level of the DOM from jQuery?

Question

Trying to figure this out... I'm trying to accessthe top level of the dom from inside an iframe. How possible is this?

Answer 1

To use selectors and jQuery functions in the inner DOM of an iframe, you can use the Traversing/contents function.

$("iframe").contents().find("body").append("I'm in an iframe!");

Answer 2

You can append window.parent.document to your calls to get to the parent.

e.g.

$('body', window.parent.document).append("this is coming from my iframe");

Edit: As noted in the comments below the iframe must be served from the same domain as the parent or the browser's security restrictions will prevent this.

Answer 3

From inside of a frame you can always get to the top level using window.top. You can check to see if you are in a frame using:

var iAmInAFrame = (window.top == window.self);

You should be able to use window.top.document.whatever (e.g. body, getElementById(), etc.) to manipulate the top level document provided that you share a domain.