How to call Javascript function from a iFrame?

Question

I have 2 html files.

1.html will call 2.html from iframe.

<iframe src="2.html" > </iframe>

2.html defined 2 javascript functions.

function func1(a, b, c) {
  for () {
    .....
  }
}

function func2() {
 func1(a, b, c);
}

HTML

<body onload="func2()">

Now my question is, I have to merge these 2 html files to one html. 2.html must be executed inside the iframe.

I tried to do by,

<!DOCTYPE html>
<html>

  <body>
    <iframe id="foo" onload="myFunction()" /> </iframe>
    <script>
      function myFunction() {
        var iframe = document.getElementById('foo'),
          iframedoc = iframe.contentDocument || iframe.contentWindow.document;
        iframedoc.body.innerHTML = func2();
      }

    </script>
  </body>

</html>

But func2() is not called. Could anyone suggest the way to call javascript functions inside iframe?

Thanks in advance.

Dinca Adrian · Accepted Answer · 2017-04-05 07:08:26Z

2

You can't call functions from iframe like that, due to CSP(Content Security Policy). The only way to comunicate outside of the iframe is with message passing. See this for explanation https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage .

answered Apr 5, 2017 at 7:08

Dinca Adrian

1,23013 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to call Javascript function from a iFrame?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related