Cross Domain Communication

Hello

I am trying to get a simple cross-domain messaging script to work. I have seen a number of examples such as easyXDM (http://easyxdm.net/wp/) but I was unable to get it to work. I kept searching Google and came across this example.

I have copied down the files and have tried to set it up to run from my local machine. Every time I run it, I get the error message, “Security Error: Content at file:/// may not load data from file:///C:/Users/courtney/Desktop/POC/parent.html.” When I execute the code from the URL above, everything works. Below is the code I am using. The only items I changed from the provided example was to replace his page URLs with the file reference to my local machine.

On parent.html:
<iframe id=‘xd_frame’ src=“file:///C:/Users/courtney/Desktop/POC/child.html” width=‘500’ height=‘250’></iframe>

XD.receiveMessage(function(message){
alert( “parnet receiveMessage” );
window.alert(message.data + " received on "+window.location.host);
}, ‘file:///C:/Users/courtney/Desktop/POC/’);

On child.html:
XD.receiveMessage(function(message){
alert( “child receiveMessage” );
window.alert(message.data + " received on "+window.location.host);
}, ‘file:///C:/Users/courtney/Desktop/POC/’);

If anyone has any feedback on why I cannot get this to work on my local machine, it would be appreciated.

Thanks!!!

parent.html


<html>

<head>

<script type='text/javascript'>

	var TORBIT={start_time:new Date().getTime()};var TBRUM=TBRUM||{};TBRUM.q=[]||TBRUM.q;TBRUM.q.push(['mark','firstbyte',(new Date).getTime()]);(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//radar.torbit.com/v1/rum.min.js';var b=document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a,b)})();
	
</script>

<title>backwards compatable postMessage demo</title>

<script src='postmessage.js'></script>

<script type='text/javascript'></script>

</head>

<body>

<h3>backwards compatable postMessage demo</h3>
This page is hosted on onlineaspect.com.
<br /><br />

<a href='#' onclick="send('hello world')">Send "hello world" message from parent to child</a><br /><br />

<iframe id='xd_frame' src="file:///C:/Users/courtney/Desktop/POC/child.html" width='500' height='250'></iframe>

<br /><br /> This <a href='http://onlineaspect.com/uploads/postmessage/postmessage.js'>script</a> enables cross domain communication between frames on different frames. We use <a href='https://developer.mozilla.org/en/DOM/window.postMessage'>window.postMessage</a> if possible, and fall back on a location.hash trick if that fails.<br /><br />

<script type="text/javascript">

    // pass the URL of the current parent page to the iframe using location.hash
	src = 'file:///C:/Users/courtney/Desktop/POC/child.html#' + encodeURIComponent(document.location.href);
    document.getElementById("xd_frame").src = src;

    function send(msg) {
        alert( "send 1" );
		XD.postMessage(msg, src, frames[0]);
        alert( "send 2" );
		return false;
    }

    // setup a callback to handle the dispatched MessageEvent. if window.postMessage is supported the passed
    // event will have .data, .origin and .source properties. otherwise, it will only have the .data property.
    XD.receiveMessage(function(message){
	    alert( "parnet receiveMessage" );
        window.alert(message.data + " received on "+window.location.host);
    }, 'file:///C:/Users/courtney/Desktop/POC/');
	
</script>  <script type='text/javascript'>(function(){var a=function(){if(!document.getElementById("torbit_menu")){var a=document.createElement("style");a.type="text/css";a.innerHTML="#torbit_menu{z-index:999999999998;position:fixed;bottom:0;right:32px;height:32px;background-color:#ccc;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddd));background:-moz-linear-gradient(top,#fff,#ddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#ddd');border:1px solid #999;border-bottom:0}#torbit_menu_logo,#torbit_menu_stats,#torbit_menu_filters{margin:8px;background-image:url(http://s1.torbit.com/img/1e352a4a209d1242bd2771da4cf7adbceee82182-widget-sprite.png);background-repeat:no-repeat;display:inline-block}#torbit_menu_logo{width:78px;height:16px}#torbit_menu_stats{margin-right:4px;background-position:-78px 0;width:16px;height:16px}#torbit_menu_filters{margin-left:4px;background-position:-94px 0;width:16px;height:16px}";document.getElementsByTagName("head")[0].appendChild(a);var b=document.createElement("div");b.id="torbit_menu";var c=document.createElement("a");c.href="http://torbit.com?from="+window.location.host;c.id="torbit_menu_logo";b.appendChild(c);window.document.body.insertBefore(b,window.document.body.firstChild)}};if(typeof window.onload!="function"){window.onload=a}else{var b=window.onload;window.onload=function(){if(b)b();a()}}})();TORBIT.dom={get:function(a){return document.getElementsByTagName(a)},gh:function(){return TORBIT.dom.get("head")[0]},ah:function(a){TORBIT.dom.gh().appendChild(a)},ce:function(a){return document.createElement(a)},gei:function(a){return document.getElementById(a)},ls:function(a,b){var c=TORBIT.dom.ce("script");c.type="text/javascript";c.src=a;if("function"==typeof b){c.onload=function(){if(!c.onloadDone){c.onloadDone=true;b()}};c.onreadystatechange=function(){if(("loaded"===c.readyState||"complete"===c.readyState)&&!c.onloadDone){c.onloadDone=true;b()}}}TORBIT.dom.ah(c)}};(function(){var a=window.TORBIT.timing={};var b=function(){if(window.performance==void 0||window.performance.timing==void 0){k(e);h(f);return}h(d)};var c=function(){var b=window.performance.timing;var c=b.navigationStart;for(var d in b){var e=b[d];if(typeof e!="number"||e==0){continue}a[d]=e-c;var f=/(.+)End$/i.exec(d);if(f){a[f[1]+"Elapsed"]=b[d]-b[f[1]+"Start"]}}};var d=function(){c();g()};var e=function(){a.or=(new Date).getTime()-TORBIT.start_time};var f=function(){a.ol=(new Date).getTime()-TORBIT.start_time;g()};var g=function(){var b="/torbit-timing.php?";for(var c in a){b+=c+"="+a[c]+"&"}if(TORBIT.fv==1)b+="fv=1&";if(TORBIT.opt==0)b+="not_opt=1&";TORBIT.dom.ls(b)};var h=function(a){if(typeof window.onload!="function"){return window.onload=a}var b=window.onload;window.onload=function(){b();a()}};var i=false;var j=function(){};var k=function(a){j=l(a);m()};var l=function(a){return function(){if(!i){i=true;a()}}};var m=function(){if(document.addEventListener){document.addEventListener("DOMContentLoaded",j,false)}else if(document.attachEvent){document.attachEvent("onreadystatechange",j);var a=false;try{a=window.frameElement==null}catch(b){}if(document.documentElement.doScroll&&a){n()}}};var n=function(){if(i){return}try{document.documentElement.doScroll("left")}catch(a){setTimeout(n,5);return}j()};b()})();TORBIT.opt=1;TORBIT.fv=1;</script></body>  </html>

child.html


<html>

<head>

<script type='text/javascript'>

	var TORBIT={start_time:new Date().getTime()};var TBRUM=TBRUM||{};TBRUM.q=[]||TBRUM.q;TBRUM.q.push(['mark','firstbyte',(new Date).getTime()]);(function(){var a=document.createElement('script');a.type='text/javascript';a.async=true;a.src='//radar.torbit.com/v1/rum.min.js';var b=document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a,b)})();
	
</script>

<title>backwards compatable postMessage demo</title>

<script src='postmessage.js'></script>

<script type='text/javascript'></script>

</head>

<body> This page is hosted at joshfraser.com 1234<br /><br />

<a href='#' onclick="send('one')">Send message "one" from child to parent</a>
<br />
<a href='#' onclick="send('two')">Send message "two" from child to parent</a>

<script type="text/javascript">

    // Get the parent page URL as it was passed in, for browsers that don't support
    // window.postMessage (this URL could be hard-coded).
    var parent_url = decodeURIComponent(document.location.hash.replace(/^#/, ''));

    function send(msg) {
	    alert( "child send 1" );
        XD.postMessage(msg, parent_url, parent);
		alert( "child send 2" );
        return false;
    }

    XD.receiveMessage(function(message){
        alert( "child receiveMessage" );
		window.alert(message.data + " received on "+window.location.host);
    }, 'file:///C:/Users/courtney/Desktop/POC/');

</script>  <script type='text/javascript'>(function(){var a=function(){if(!document.getElementById("torbit_menu")){var a=document.createElement("style");a.type="text/css";a.innerHTML="#torbit_menu{z-index:999999999998;position:fixed;bottom:0;right:32px;height:32px;background-color:#ccc;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#ddd));background:-moz-linear-gradient(top,#fff,#ddd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#ddd');border:1px solid #999;border-bottom:0}#torbit_menu_logo,#torbit_menu_stats,#torbit_menu_filters{margin:8px;background-image:url(http://s1.torbit.com/img/1e352a4a209d1242bd2771da4cf7adbceee82182-widget-sprite.png);background-repeat:no-repeat;display:inline-block}#torbit_menu_logo{width:78px;height:16px}#torbit_menu_stats{margin-right:4px;background-position:-78px 0;width:16px;height:16px}#torbit_menu_filters{margin-left:4px;background-position:-94px 0;width:16px;height:16px}";document.getElementsByTagName("head")[0].appendChild(a);var b=document.createElement("div");b.id="torbit_menu";var c=document.createElement("a");c.href="http://torbit.com?from="+window.location.host;c.id="torbit_menu_logo";b.appendChild(c);window.document.body.insertBefore(b,window.document.body.firstChild)}};if(typeof window.onload!="function"){window.onload=a}else{var b=window.onload;window.onload=function(){if(b)b();a()}}})();TORBIT.dom={get:function(a){return document.getElementsByTagName(a)},gh:function(){return TORBIT.dom.get("head")[0]},ah:function(a){TORBIT.dom.gh().appendChild(a)},ce:function(a){return document.createElement(a)},gei:function(a){return document.getElementById(a)},ls:function(a,b){var c=TORBIT.dom.ce("script");c.type="text/javascript";c.src=a;if("function"==typeof b){c.onload=function(){if(!c.onloadDone){c.onloadDone=true;b()}};c.onreadystatechange=function(){if(("loaded"===c.readyState||"complete"===c.readyState)&&!c.onloadDone){c.onloadDone=true;b()}}}TORBIT.dom.ah(c)}};(function(){var a=window.TORBIT.timing={};var b=function(){if(window.performance==void 0||window.performance.timing==void 0){k(e);h(f);return}h(d)};var c=function(){var b=window.performance.timing;var c=b.navigationStart;for(var d in b){var e=b[d];if(typeof e!="number"||e==0){continue}a[d]=e-c;var f=/(.+)End$/i.exec(d);if(f){a[f[1]+"Elapsed"]=b[d]-b[f[1]+"Start"]}}};var d=function(){c();g()};var e=function(){a.or=(new Date).getTime()-TORBIT.start_time};var f=function(){a.ol=(new Date).getTime()-TORBIT.start_time;g()};var g=function(){var b="/torbit-timing.php?";for(var c in a){b+=c+"="+a[c]+"&"}if(TORBIT.fv==1)b+="fv=1&";if(TORBIT.opt==0)b+="not_opt=1&";TORBIT.dom.ls(b)};var h=function(a){if(typeof window.onload!="function"){return window.onload=a}var b=window.onload;window.onload=function(){b();a()}};var i=false;var j=function(){};var k=function(a){j=l(a);m()};var l=function(a){return function(){if(!i){i=true;a()}}};var m=function(){if(document.addEventListener){document.addEventListener("DOMContentLoaded",j,false)}else if(document.attachEvent){document.attachEvent("onreadystatechange",j);var a=false;try{a=window.frameElement==null}catch(b){}if(document.documentElement.doScroll&&a){n()}}};var n=function(){if(i){return}try{document.documentElement.doScroll("left")}catch(a){setTimeout(n,5);return}j()};b()})();TORBIT.opt=1;TORBIT.fv=0;</script></body>  </html>