Simple pop-up window example

Furn

unread,

May 5, 2012, 1:55:46 AM5/5/12

to easyxdm

I know your busy, thank you for your time in advance.

Hoping easyXDM can save me, this is the 5th project I've tried to get
IE8 + other browser, compatible bi-directional communication between
two windows from the same domain.

I've read your documentation and had trouble deciphering the
bridge.html example, I would hope it's as simple as the following code
below. (I've tried many combinations of parts of your example code)

There are many many queries on the web about doing just this, it would
benefit me and a great many people to have this example wrapped up in
2 or 3 simple html files, and be a great example on your website.

I also read somewhere that easyXDM creates its own iframe if needed,
so it should work in IE8? or does this need to be wrapped in an
iframe.

After reading your doc's I can't figure out what 'name.html' is for
the nameTransport fallback, neither can I find the file in your GIT
examples, I would like to auto-fallback to all three transports as
your website claims.

[index.html]

<! doctype html>
<html>
<head>

<title>postmessage Test</title>
<script type="text/javascript" src="easyXDM.debug.js" </
script>
<script type="text/javascript">
easyXDM.DomHelper.requiresJSON("json2.js"); </script>

<script type="text/javascript">
var target;

target = window.open("http://localhost/child.html",'popupWindow');

var socket = new easyXDM.Socket({
swf: "easyxdm.swf",
onMessage: function(message, origin){
alert("Received '" + message + "' from '" + origin + "'");
}
});
</script>

</head>
<body>
Parent Window<br/>
<button class="send-button" onclick="socket.postMessage('Msg from
Parent');">Post message</button>

</body>
</html>

[child.html]

<! doctype html>
<html>
<head>

<title>postmessage Child</title>
<script type="text/javascript" src="easyXDM.debug.js" </
script>
<script type="text/javascript">
easyXDM.DomHelper.requiresJSON("json2.js"); </script>

<script type="text/javascript">

var socket = new easyXDM.Socket({
remote: "http://localhost/",
swf: "easyxdm.swf",
onMessage: function(message, origin){
alert("Received '" + message + "' from '" + origin + "'");
}
});
</script>

</head>
<body>
Popup Window<br/>
<button class="send-button" onclick="socket.postMessage('Msg from
child');">Post message</button>

</body>
</html>

Kind Regards

findchris

unread,

Aug 16, 2012, 8:40:34 PM8/16/12

to eas...@googlegroups.com

+1 for this

I cannot get communication working between a popup and a parent page in IE9.

And the IE notes in the FAQ (http://easyxdm.net/wp/frequently-asked-questions/) is completely useless as I have no idea if this is the issue or not.

Øyvind Sean Kinsey

unread,

Aug 17, 2012, 5:09:47 AM8/17/12

to eas...@googlegroups.com

Take a look at https://github.com/oyvindkinsey/JsApiToolkit

It comes with a client/server which supports displaying pages from the server both using iframes and popups, which both can talk to the client page.

But this in fact really simple once you break it down - if you from doc A (dom A) can talk to doc B (dom B), then it can also by proxy talk to doc C (dom B) via doc B even if it is in a popup, and vice versa. This is the approach you need to use. Doc A and C talk via doc B.

Øyvind Sean Kinsey
San Francisco, CA

findchris

unread,

Aug 17, 2012, 3:57:58 PM8/17/12

to eas...@googlegroups.com

I see that example, and I see the bridge.html example for easyXDM.

My configuration is quite similar: Communicating from a pop-up to it's opener on a separate domain. I have the same bridge.html => blank.html => remoteapp.html flow as your example. I have done a line-by-line comparison of your bridge example code to mine, and the only differences that I see are that your includes the 'local' and 'remoteHelper' helper options required by the NameTransport. I have the 'swf' option specified, so am not using the NameTransport (although theoretically it should be using the PostMessageTransport). It's the oddest thing: My code works perfectly on all browsers except IE.

I've traced the communication, and the remoteapp.html does not correctly set the host:

try {

if (window.opener.document.title) {

host = window.opener;

}

catch (xDomainError) {

host = window.opener.frames[target]; // we get here

}

// host is null here!

Additionally, I note that my code reports that HAS_NAME_PROPERTY_BUG is true, whereas your example reports false. How is this possible?

Is there any other information I can provide that might help? You can see this in action here: http://test.socialvibe.com/easyxdm_test.html

I appreciate your time!

Cheers,

Chris

findchris

unread,

Aug 17, 2012, 8:52:29 PM8/17/12

to eas...@googlegroups.com

This has to do with using noConflict with IE popups. See: https://github.com/oyvindkinsey/easyXDM/issues/192

Reply all

Reply to author

Forward