access and change parent page from iframe (with jq

2020-02-02 12:15发布

问题:

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.

回答1:

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.



回答2:

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;


回答3:

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