access and change parent page from iframe (with jquery)

is there any way how to access from iframe to parrent page (and change parrent page)?

   <iframe src="" name="frame1" height="100%"></iframe>
   <div id="test1"></div>

In frame1.html is <a href=..> and I want to add text “<h1>clicked</h1>” into <div id="test1"></div>, when the <a href..> was clicked.


If your child page (frame1.html) is located at the same domain as the parent page, You can write a code like below in the child window :

 $('#test1', parent.document).html('<h1>clicked</h1>');

The second parameter provides the context in which to search the element matched by the first parameter. The Document is here:

 jQuery( selector [, context ] )

So, your code (frame1.html) could go like this:

 <a href="" 
  onclick="$('#test1', parent.document).html('<h1>clicked</h1>');">click me</a>

Hope this helps.

Important note: Accessing in and out iframes is only possible, if both, parent and iframe are from the same domain, else you have no access due to Same Origin Policy.

Note, that both parts have their own document. Accessing the parent object from iframe is simple with


and from parent it is one of the following:


(window.frames.length /*gives you the number of iframes in your document*/ )

or reference it with id and do the following (watch out for support!)

var iframe = document.getElementById('iframe');
var doc = iframe.contentDocument? iframe.contentDocument:iframe.contentWindow.document;

The code below should work fine:


The selector is from the parent document to perform some action. For Example:


The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   Disable Button in Angular 2

Similar Posts