How to Call Parent Window JavaScript Function inside iframe

Question

Here is my code on http://my-localhost.com/iframe-test.html

<html>
<head><title>Welcome Iframe Test</title></head>
<body>
<iframe src="http://www.my-website.com/index.html" width="500" height="500"></iframe>
<script type="text/javascript">
function alertMyMessage(msg){
    alert(msg);
}
</script>
</body>
</html>

Here is code on http://www.my-website.com/index.html

<html>
<head></title>Welcome to my Server</title></head>
<body>
<h1>Welcome to My Server</ht>
<a href="javascript:void(0)" title="Click here" onClick="parent.alertMyMessage('Thanks for Helping me')">Click Here</a>
</body>
</html>

When i Click the "Click Here" Link. i got following Error.

Uncaught SecurityError: Blocked a frame with origin "http://www.my-website.com" from accessing a frame with origin "http://my-localhost.com". Protocols, domains, and ports must match.

Please Help me to Fix this Issue, or give some other solution for this.

Then for this purpose what i can use? Actually my purpose is i have fixed html page which is going to open many websites. and those websites user have to click a link, and the link should call a function in the fixed html page. — rkaartikeyan
– rkaartikeyan, Commented Oct 16, 2013 at 14:50

Quentin · Accepted Answer · 2013-10-16 15:11:36Z

19

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

answered Oct 16, 2013 at 15:11

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

4 Comments

rkaartikeyan Over a year ago

Thanks will try :) and let you know

rkaartikeyan Over a year ago

Thanks this method is working on Chrome. but in Safari its not working :(

Chloe Over a year ago

@Quentin Neat. Using Chrome, I received the message, but it did not display the iframe window location.

Uncaught SecurityError: Blocked a frame with origin "http://fiddle.jshell.net" from accessing a frame with origin "http://stone.thecoreworlds.net". Protocols, domains, and ports must match.

Quentin Over a year ago

@Chloe — That's because you have to use postMessage to pass the data, and the code that tries to read the location doesn't.

Platinum Azure · Accepted Answer · 2014-10-06 21:28:24Z

13

You can use postMessage!

PARENT

if (window.addEventListener) {
    window.addEventListener ("message", receive, false);        
}
else {
    if (window.attachEvent) {
        window.attachEvent("onmessage",receive, false);
    }
}

function receive(event){
    var data = event.data;
    if(typeof(window[data.func]) == "function"){
        window[data.func].call(null, data.params[0]);
    }
}

function alertMyMessage(msg){

    alert(msg);
}

IFRAME

function send(){
    window.parent.window.postMessage(
        {'func':'alertMyMessage','params':['Thanks for Helping me']},
        'http://www.my-website.com'
    );
}

REFERENCE

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

edited Oct 6, 2014 at 21:28

Platinum Azure

46.4k13 gold badges112 silver badges136 bronze badges

answered Oct 16, 2013 at 15:23

emilianoeloi

6246 silver badges11 bronze badges

4 Comments

Chloe Over a year ago

Use ## for headers.

user2568374 Over a year ago

This works! But is there a way to dynamically populate 'my-website.com' instead of hard code?

user2568374 Over a year ago

I was able to use location.ancestorOrigins[0]) instead of hardcoded 'my-website.com'

user2568374 Over a year ago

I'm noticing that Window IE11 throws a SCRIPT70 "Permission denied" on funciton send(). Is there a way to solve that?

Collectives™ on Stack Overflow

How to Call Parent Window JavaScript Function inside iframe

2 Answers 2

4 Comments

PARENT

IFRAME

REFERENCE

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

PARENT

IFRAME

REFERENCE

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related