Dan
Dan

Reputation: 595

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

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

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.

Thanks.

Upvotes: 25

Views: 32077

Answers (3)

Teja
Teja

Reputation: 41

The code below should work fine:

$(parent.document).find("#selector");

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

$(parent.document).find("#selector").remove();

Upvotes: 4

naota
naota

Reputation: 4718

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:http://api.jquery.com/jQuery/#jQuery-selector-context

 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.

Upvotes: 25

Christoph
Christoph

Reputation: 51261

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

parent.document

and from parent it is one of the following:

window.frames['iframeName']

(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;

Upvotes: 9

Related Questions