Javascript and same origin iframes

Question

Is it possible to read/edit iframe contents(not only properties like src) with scripts that are on page but outside of this frame? I know that is impossible if source is from other site as it would be a big serurity hole, but I only ask whether it works for other content from the same origin.

Answer 1

Yes, you can do this if the location of the iframe and parent page are of the same host (same origin policy).

To ensure the browser will let you do this, you can use

document.domain = "example.com" 

on the parent page and in the iframe. (note that subdomain.example.com and example.com are different)

Dom method for doing this (parent page to iframe):

document.getElementById("myiframe").contentWindow.document.getElementById("divinframe").innerHTML = "I'm on the inside.";

document.getElementById("myiframe").contentWindow.someFunctionInsideIframe();

contentWindow is the answer and works in most if not all modern browsers, certainly chrome, ie7+ etc.

To go the other way (iframe to parent page):

top.document.getElementById("DivInTopParent")

Answer 2

To add to what has already been said about interacting with iframes loaded from the same domain:

The browser will allow you to interact with iframes (or frames) as long as the page that is trying to do the interaction and the page that you have loaded have the same document.domain.

You can set the document.domain to a suffix of the host that you were loaded from. e.g. if you have a page loaded from blog.fred.com and it wants to interact with some service called jsonservice.fred.com, both pages will have to do

document.domain = 'fred.com';

before javascript from one will be able to interact with the other.

Browsers are clever enough not to allow you to set your document.domain to '.com', in case you were wondering...