2

I want to have cross domain javascript call.

1: SiteA: www.sub1.foo.com

2: Open SiteB: www.bar.com in iframe from SiteA

3: Pass some value from SiteB to SiteA via javascript after some action in SiteB.

Try 1: I followed this article and I followed #2 for my setup. But I keep getting errors:

IE: Invalid Argument

FF:Illegal document.domain value.

Try 2: Followed this article.

It works in FF. I can use window.parent.parent.MyFunction() but in IE I get "Permission Denied" error.

Try 3: I even tried the window.postMessage technique but I am not even able to get that working.

Is anyone out there who has successfully implemented Cross Domain JS calls for situation like above. Or any help / links / suggestions.

asked Aug 30, 2011 at 16:09
2
  • i tried for a long time and could never get it to work. I instead built a chrome extension which will allow any cross domain requests as long as you add the domains to the manifest...not sure if this will help you in your situation because the website visitors will not install an extension just to look at your website.. Commented Aug 30, 2011 at 16:31
  • @Johnny: Nope that extension way won't work for me. Commented Aug 30, 2011 at 17:49

3 Answers 3

7

You can implement window.postMessage to communicate accross iframes/windows across domains.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>
 <!--
 <link rel="shortcut icon" href="/favicon.ico">
 <link rel="start" href="http://benalman.com/" title="Home">
 <link rel="stylesheet" type="text/css" href="/code/php/multi_file.php?m=benalman_css">
 <script type="text/javascript" src="/js/mt.js"></script>
 -->
 <script type="text/javascript">
 // What browsers support the window.postMessage call now?
 // IE8 does not allow postMessage across windows/tabs
 // FF3+, IE8+, Chrome, Safari(5?), Opera10+
 function SendMessage()
 {
 var win = document.getElementById("ifrmChild").contentWindow;
 // http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/
 // http://stackoverflow.com/questions/16072902/dom-exception-12-for-window-postmessage
 // Specify origin. Should be a domain or a wildcard "*"
 if (win == null || !window['postMessage'])
 alert("oh crap");
 else
 win.postMessage("hello", "*");
 //alert("lol");
 }
 function ReceiveMessage(evt) {
 var message;
 //if (evt.origin !== "http://robertnyman.com")
 if (false) {
 message = 'You ("' + evt.origin + '") are not worthy';
 }
 else {
 message = 'I got "' + evt.data + '" from "' + evt.origin + '"';
 }
 var ta = document.getElementById("taRecvMessage");
 if (ta == null)
 alert(message);
 else
 document.getElementById("taRecvMessage").innerHTML = message;
 //evt.source.postMessage("thanks, got it ;)", event.origin);
 } // End Function ReceiveMessage
 if (!window['postMessage'])
 alert("oh crap");
 else {
 if (window.addEventListener) {
 //alert("standards-compliant");
 // For standards-compliant web browsers (ie9+)
 window.addEventListener("message", ReceiveMessage, false);
 }
 else {
 //alert("not standards-compliant (ie8)");
 window.attachEvent("onmessage", ReceiveMessage);
 }
 }
 </script>
</head>
<body>
 <iframe id="ifrmChild" src="child.htm" frameborder="0" width="500" height="200" ></iframe>
 <br />
 <input type="button" value="Test" onclick="SendMessage();" />
</body>
</html>

Child.htm

<!DOCTYPE html>
<html lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>
 <!--
 <link rel="shortcut icon" href="/favicon.ico">
 <link rel="start" href="http://benalman.com/" title="Home">
 <link rel="stylesheet" type="text/css" href="/code/php/multi_file.php?m=benalman_css">
 <script type="text/javascript" src="/js/mt.js"></script>
 -->
 <script type="text/javascript">
 /*
 // Opera 9 supports document.postMessage() 
 // document is wrong
 window.addEventListener("message", function (e) {
 //document.getElementById("test").textContent = ;
 alert(
 e.domain + " said: " + e.data
 );
 }, false);
 */
 // https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
 // http://ejohn.org/blog/cross-window-messaging/
 // http://benalman.com/projects/jquery-postmessage-plugin/
 // http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html
 // .data – A string holding the message passed from the other window.
 // .domain (origin?) – The domain name of the window that sent the message.
 // .uri – The full URI for the window that sent the message.
 // .source – A reference to the window object of the window that sent the message.
 function ReceiveMessage(evt) {
 var message;
 //if (evt.origin !== "http://robertnyman.com")
 if(false)
 {
 message = 'You ("' + evt.origin + '") are not worthy';
 }
 else
 {
 message = 'I got "' + evt.data + '" from "' + evt.origin + '"';
 }
 //alert(evt.source.location.href)
 var ta = document.getElementById("taRecvMessage");
 if(ta == null)
 alert(message);
 else
 document.getElementById("taRecvMessage").innerHTML = message;
 // http://javascript.info/tutorial/cross-window-messaging-with-postmessage
 //evt.source.postMessage("thanks, got it", evt.origin);
 evt.source.postMessage("thanks, got it", "*");
 } // End Function ReceiveMessage
 if (!window['postMessage'])
 alert("oh crap");
 else {
 if (window.addEventListener) {
 //alert("standards-compliant");
 // For standards-compliant web browsers (ie9+)
 window.addEventListener("message", ReceiveMessage, false);
 }
 else {
 //alert("not standards-compliant (ie8)");
 window.attachEvent("onmessage", ReceiveMessage);
 }
 }
 </script>
</head>
<body style="background-color: gray;">
 <h1>Test</h1>
 <textarea id="taRecvMessage" rows="20" cols="20" ></textarea>
</body>
</html>
answered May 31, 2013 at 11:17
Sign up to request clarification or add additional context in comments.

1 Comment

I had "Protocols, domains, and ports must match" error only on Safari, even though I postMessage to * target origin. What could be the reason?
0

I believe this is restricted for security reasons. It's been discussed previously on Stack Overflow here: <iframe> javascript access parent DOM across domains?

answered Aug 30, 2011 at 16:24

1 Comment

I hoped there was some way because the second link workaround works with FF but not with IE.
0
answered Aug 30, 2011 at 21:32

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.