11

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.

rkaartikeyan
  • 1,977
  • 9
  • 29
  • 57
  • why are you using IFrames for this? – dbarnes Oct 16 '13 at 14:48
  • 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 Oct 16 '13 at 14:50

2 Answers2

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

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks will try :) and let you know – rkaartikeyan Oct 16 '13 at 15:16
  • Thanks this method is working on Chrome. but in Safari its not working :( – rkaartikeyan Oct 16 '13 at 15:37
  • @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.` – Chloe Jan 03 '14 at 21:24
  • @Chloe — That's because you have to use `postMessage` to pass the data, and the code that tries to read the location doesn't. – Quentin Jan 04 '14 at 08:42
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

Platinum Azure
  • 45,269
  • 12
  • 110
  • 134
emilianoeloi
  • 554
  • 4
  • 11