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.

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.

• javascript
• iframe

• I think this link says it all Scripting Iframes - Tutorial and Examples – mplungjan Commented Apr 22, 2010 at 17:42

5 Answers 5

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")

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...

if the iframe-content is from the same domain you can access it by using frames.myiframe.getElement...

The browser only restricts access to iframe/parent contents for content which is not from the same domain. For requests from the same domain you can access content via window.parent or via myiframe.document.getElementById

This is not exactly a client-side/javascript solution, but it helped me to resolve the issue.

You need to remove the X-Frame-Options header, if present, and instead send the following one for the iframe page:

Content-Security-Policy: frame-ancestors 'self' example.com *.example.com

and additional one for IE:

X-Content-Security-Policy: frame-ancestors 'self' example.com *.example.com