Best IT Recipes

Call javascript function in iframe

I have a problem calling a JavaScript function in an iframe from the parent page. Here are my two pages:

mainPage.html

 <html> <head> <title>MainPage</title> <script type="text/javascript"> function Reset() { if (document.all.resultFrame) alert("resultFrame found"); else alert("resultFrame NOT found"); if (typeof (document.all.resultFrame.Reset) == "function") document.all.resultFrame.Reset(); else alert("resultFrame.Reset NOT found"); } </script> </head> <body> MainPage<br> <input type="button" onclick="Reset()" value="Reset"><br><br> <iframe height="100" id="resultFrame" src="resultFrame.html"></iframe> </body> </html>

resultFrame.html

 <html> <head> <title>ResultPage</title> <script type="text/javascript"> function Reset() { alert("reset (in resultframe)"); } </script> </head> <body> ResultPage </body> </html>

(I know document.all not recommended, but this page needs to be viewed only with IE, and I don't think the problem is)

When I click the Reset button, I get "resultFrame found" and "resultFrame.Reset NOT found". It seems to be referencing a frame, but cannot call a function in a frame, why?

+45
javascript iframe
Oct 21 '09 at 12:30
source share
7 answers

Using:

 document.getElementById("resultFrame").contentWindow.Reset();

to access the reset function in the iframe

document.getElementById("resultFrame") will receive an iframe in your code, and contentWindow will receive a window object in the iframe. When you have a child window, you can reference javascript in this context.

Also see HERE , in particular the answer from bobince.

+83
Oct 21 '09 at 12:38
source share

Instead of getting a frame from a document, try to get a frame from a window object.

in the above example, change this:

 if (typeof (document.all.resultFrame.Reset) == "function") document.all.resultFrame.Reset(); else alert("resultFrame.Reset NOT found");

to

 if (typeof (window.frames[0].Reset) == "function") window.frames[0].Reset(); else alert("resultFrame.Reset NOT found");

the problem is that the javascript scope inside the iframe is not displayed through the DOM element for the iframe. only window objects contain javascript view information for frames.

+5
Oct 21 '09 at 12:43
source share

For even greater reliability:

 function getIframeWindow(iframe_object) { var doc; if (iframe_object.contentWindow) { return iframe_object.contentWindow; } if (iframe_object.window) { return iframe_object.window; } if (!doc && iframe_object.contentDocument) { doc = iframe_object.contentDocument; } if (!doc && iframe_object.document) { doc = iframe_object.document; } if (doc && doc.defaultView) { return doc.defaultView; } if (doc && doc.parentWindow) { return doc.parentWindow; } return undefined; }

and

 ... var el = document.getElementById('targetFrame'); getIframeWindow(el).reset(); ...
+4
Aug 03 '12 at 13:05
source share

Call

 window.frames['resultFrame'].Reset();
+3
Oct 21 '09 at 12:38
source share

objectframe.contentWindow.Reset() you need to reference the top level element in the frame first.

+2
Oct 21 '09 at 12:38
source share

The first and most important condition that must be met is that both the parent and the iframe must belong to the same origin. Once this is done, the child can call the parent using the window.opener method, and the parent can do the same for the child, as described above.

+2
May 27 '15 at 09:32
source share

When you access resultFrame through document.all, it pulls it out only as an HTML element, not a window frame. You get the same problem if you have a frame that fires an event using "this" self-promotion.

Replace:

 document.all.resultFrame.Reset();

FROM

 window.frames.resultFrame.Reset();

Or:

 document.all.resultFrame.contentWindow.Reset();
+1
Oct. 21 '09 at 12:42
source share


More articles:


All Articles