Calling a Parent Window Function from an Iframe

Calling a parent window function from an iframe

<a onclick="parent.abc();" href="#" >Call Me </a>

See window.parent

Returns a reference to the parent of the current window or subframe.

If a window does not have a parent, its parent property is a reference to itself.

When a window is loaded in an <iframe>, <object>, or <frame>, its parent is the window with the element embedding the window.

How to Call Parent Window JavaScript Function inside iframe

You cannot access the DOM of a page loaded in a frame in a different origin. This is blocked for security reasons (imagine a random website you visited opening your web mail service in a hidden iframe and you can see why).

The closest you can come, and then only if you control both websites, is to pass messages between them using the web messaging api.

In one page, write a function to handle the messages and then add it as a message event listener.

function receiveMessage(event)
{
  alert(event.data);
}

addEventListener("message", receiveMessage, false);

In the other, send the message:

parent.postMessage("This is a message", "*");

See MDN for more information

Call parent Javascript function from inside an iframe

Try just parent.myfunction(). Also be 100% sure that the parent.js is included in your parent document.

Call function on iframe parent window (window.top/window.parent) (circumvent cross-origin object access security)

The correct way to circumvent this is using Window.postMessage - Essentially, send a message from the iframe up to its parent window, which, if it has an event listener for "message", can react accordingly.

ie.:

a.com/index.html

<!DOCTYPE html>
<html>
  <body>
    <script>
      let someFunc = t => document.querySelector("#test").text = t;
      window.addEventListener("message", event => someFunc(e.data));
    </script>
    <span id="test">This is some dummy text.</span>
    <iframe src="https://b.com/index.html"></iframe>
  </body>
</html>

b.com/index.html

<!DOCTYPE html>
<html>
  <body>
    <button id="btn">Test</button>
    <script>
      document.querySelector("#btn")
        .addEventListener("click", event => {
          window.parent.postMessage("Changed text", "http://a.com");
        });
    </script>
  </body>
</html>

Calling parent window method from Iframe (different)

You can't access the parent window function's methods through a cross domain iFrame. It goes against the Same Origin Policy . The X-Frame http header response tells the browser whether it is allowed to render a page in the iFrame and does not help your situation.

The solution I recommend is to use window.postMessage() to communicate between the two frames. Look at http://ejohn.org/blog/cross-window-messaging/

Allowing a child Iframe to call a function on its parent window from a different domain

You can communicate between frames via the message posting API.

For example, in your child frame you might call:

parent.postMessage("child frame", "*");

And in the parent frame, register a message handler:

window.addEventListener("message", function(event) {
    console.log("Hello from " + event.data);
});

Calling a Parent Window Function from an Iframe