-
-
Save mbajur/8325540 to your computer and use it in GitHub Desktop.
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Index</title> | |
<script type="text/javascript"> | |
window.open ("popup.html","mywindow", "width=350,height=250"); | |
// Create IE + others compatible event handler | |
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; | |
var eventer = window[eventMethod]; | |
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; | |
// Listen to message from child window | |
eventer(messageEvent,function(e) { | |
console.log('origin: ', e.origin) | |
// Check if origin is proper | |
if( e.origin != 'http://localhost' ){ return } | |
console.log('parent received message!: ', e.data); | |
}, false); | |
</script> | |
</head> | |
<body> | |
</body> | |
</html> |
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Popup</title> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
window.opener.postMessage({token: 'aaa', secret: 'bbb'}, 'http://localhost'); | |
</script> | |
</body> | |
</html> |
Try converting the message from object to string, it should work
How do you do this with an iframe instead of a popup?
@kevinkt window.parent.postMessage() from iframe.
it is not works for IE Cross domains. is there any other solution?
@chodavarapugroup there's not a good cross-domain approach I've found except to host your page in a same-domain iframe.
I came across this when searching for getting post message to work cross domains using a popup in IE11. The solution in this code didn't work for me in IE11, but a very similar solution that I found on SO did:
https://stackoverflow.com/a/36630058/2754718
In case for whatever reason that link breaks in the future, here is what it said:
Building on answer by tangle, I had success in IE11 [and emulated IE10 mode] using following snippet:
var submitWindow = window.open("/", "processingWindow");
submitWindow.location.href = 'about:blank';
submitWindow.location.href = 'remotePage to comunicate with';
Then I was able to communicate using typical postMessage stack, I'm using one global static messenger in my scenario (alotough I don't suppose it's of any signifficance, I'm also attaching my messenger class)
var messagingProvider = {
_initialized: false,
_currentHandler: null,
_init: function () {
var self = this;
this._initialized = true;
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
var callback = self._currentHandler;
if (callback != null) {
var key = e.message ? "message" : "data";
var data = e[key];
callback(data);
}
}, false);
},
post: function (target, message) {
target.postMessage(message, '*');
},
setListener: function (callback) {
if (!this._initialized) {
this._init();
}
this._currentHandler = callback;
}
}
No matter how hard I tried, I wasn't able to make things work on IE9 and IE8
My config where it's working:
IE version: 11.0.10240.16590, Update versions: 11.0.25 (KB3100773)
Have you tested that on IE11 or less? It does not seem to work for me.