Access child iFrame DOM from parent page

javascript iframe same-origin-policy
timelf123 picture timelf123 · Mar 3, 2011 · Viewed 34k times · Source

Here is the deal:

domain.com/page -- Parent page (document.domain=domain.com) contains an iframe sub.domain.com/page -- Child iframe (document.domain=not set) is on a subdomain

Is there any way to access the DOM of that iframe or am I out of luck?

Does same origin policy block me from forcing a document.domain on an iframe contained within a parent page? I suppose that would defeat the purpose of the same origin policy... If that is the case, is there any workaround to access the DOM of the iframe on the rendered parent page?

Answer

Zoidberg picture Zoidberg · Mar 3, 2011

There is a way. When the page in the iframe loads, have it do the following

parent.childGetElementById = function (id) {return document.getElementById(id);}
parent.childLoaded();

This will make a function in the global scope of the parent page (that contains the iframe). Then in the parent, just have the following

function childLoaded() {var dom = childGetElementById('someid');}

This is along as you have control of the page your loading into the iframe... if you do not, you are out of luck.

Related questions

SecurityError: Blocked a frame with origin from accessing a cross-origin frame

I am loading an <iframe> in my HTML page and trying to access the elements within it using Javascript, but when I try to execute my code, I get the following error: SecurityError: Blocked a frame with origin "…

Read More
jQuery/JavaScript: accessing contents of an iframe

I would like to manipulate the HTML inside an iframe using jQuery. I thought I'd be able to do this by setting the context of the jQuery function to be the document of the iframe, something like: $(function(){ //document ready $(…

Read More
Using iframe with local files in Chrome

I am having a tough time figuring out how to access a page loaded in an iframe from the outer page. Both pages are local files, and I'm using Chrome. I have an outer page, and many inner pages. The …

Read More