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="https://stackoverflow.com/questions/10748449/frame1.html" name="frame1" height="100%"></iframe> <div id="test1"></div> </body>
In frame1.html is
<a href=..> and I want to add text “
<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 :
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="https://stackoverflow.com/questions/10748449/..." 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['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;
The code below should work fine:
The selector is from the parent document to perform some action. For Example: