Calling javascript function in iframe

Question

I have problem calling a JavaScript function in an iframe from the parent page. Here is 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 that document.all isn't recommended but this page should only be viewed with IE internally and I don't think that's the problem)

When I press the Reset-button I get "resultFrame found" and "resultFrame.Reset NOT found". It seems to have a reference to the frame but can't call the function on the frame, why is that?

duplicate of http://stackoverflow.com/questions/251420/invoking-javascript-in-iframe-from-parent-page — Jonathan Fingland, Oct 21 '09 at 12:41
Possible duplicate of [Invoking JavaScript code in an iframe from the parent page](http://stackoverflow.com/questions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page) — luk3yx, Mar 26 '17 at 03:12

score 146 · Accepted Answer · edited May 23 '17 at 11:46

146

Use:

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

to access the Reset function in the iframe

document.getElementById("resultFrame") will get the iframe in your code, and contentWindow will get the window object in the iframe. Once you have the child window, you can refer to javascript in that context.

Also see HERE in particular the answer from bobince.

edited May 23 '17 at 11:46

Community

1
1

answered Oct 21 '09 at 12:38

Jonathan Fingland

56,385
11
85
79

6

Hi Jonathan, does the .contentWindow still work? I do `console.log(document.getElementById('iframeID').contentWindow)` and in Firebug it correctly shows my `test()` function in my iframe, but when I go to call the function it says it's not a function, but it is! Testing it in FF4. – Gary Green Apr 21 '11 at 14:39

Dominique Fortin · Answer 2 · 2018-10-31T21:17:52.077

For even more robustness:

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

var frame_win = getIframeWindow(el);

if (frame_win) {
  frame_win.reset();
  ...
}
...

score 5 · Answer 3 · answered Oct 21 '09 at 12:43

Instead of getting the frame from the document, try getting the frame from the 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 scope of the javascript inside the iframe is not exposed through the DOM element for the iframe. only window objects contain the javascript scoping information for the frames.

score 4 · Answer 4 · answered Oct 21 '09 at 12:38

4

Call

window.frames['resultFrame'].Reset();

answered Oct 21 '09 at 12:38

Arsen Mkrtchyan

49,896
32
148
184

score 3 · Answer 5 · edited Oct 21 '09 at 12:39

3

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

edited Oct 21 '09 at 12:39

Arsen Mkrtchyan

49,896
32
148
184

answered Oct 21 '09 at 12:38

Alex H

733
4
8

score 2 · Answer 6 · answered May 27 '15 at 21:32

The first and foremost condition that needs to be met is that both the parent and iframe should belong to the same origin. Once that is done the child can invoke the parent using window.opener method and the parent can do the same for the child as mentioned above

score 1 · Answer 7 · answered Feb 28 '18 at 19:10

1

If you can not use it directly and if you encounter this error: Blocked a frame with origin "http://www..com" from accessing a cross-origin frame. You can use postMessage() instead of using the function directly.

answered Feb 28 '18 at 19:10

user9384187

21
1

score 0 · Answer 8 · answered Oct 21 '09 at 12:42

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

Replace:

document.all.resultFrame.Reset();

With:

window.frames.resultFrame.Reset();

Or:

document.all.resultFrame.contentWindow.Reset();

Serge Stroobandt · Answer 9 · 2021-03-25T06:25:59.177

Calling a privacy-respecting `XMLHttpRequest` from an `<iframe>`

HTML:

<iframe id="iframe"></iframe>

JavaScript:

const iframe    = document.getElementById('iframe');
const iframeWin = iframe.contentWindow || iframe;
const iframeDoc = iframe.contentDocument || iframeWin.document;

let script = iframeDoc.createElement('SCRIPT');

script.append(`function sendWithoutOrigin(url) {
    let request = new XMLHttpRequest();

    request.open('GET', url);

    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE) {
            if(request.status === 200) {
                console.log('GET succeeded.');
            }
            else {
                console.warn('GET failed.');
            }
        }
    }
    request.send();
}`);

iframeDoc.documentElement.appendChild(script);

JavaScript evocation:

let url  = 'https://api.serivce.net/';
    url += '?api_key=' + api_write_key;
    url += '&field1=' + value;

iframeWin.sendWithoutOrigin(url);

Calling javascript function in iframe

9 Answers9

Calling a privacy-respecting `XMLHttpRequest` from an `<iframe>`

Linked

Calling javascript function in iframe

9 Answers9

Calling a privacy-respecting XMLHttpRequest from an <iframe>

Linked

Calling a privacy-respecting `XMLHttpRequest` from an `<iframe>`