[ demo ] [ source code ]
The demo demonstrates how easy it is for two iframe of different origins to talk to each other. In real time, each iframe is passing its own mouse coordinates from "onmousemove" event to each other.Right now, this feature is only supported in Firefox 3, IE8, Opera 9 and Safari Nightlies.
The basic semantic is to use postMessage() to send data to a window object and the receiving window should register for the "onmessage" event to receive data.
window.document.onmousemove = function(e) {
var x = (window.Event) ? e.pageX : window.event.clientX;
var y = (window.Event) ? e.pageY : window.event.clientY;
// this send data to the second iframe of the current page
window.parent.frames[1].postMessage('x = ' + x + ' y = ' + y, '*');
};
var onmessage = function(e) {
var data = e.data;
var origin = e.origin;
document.getElementById('display').innerHTML = data;
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', onmessage);
}
One thing to beware of is that for some reason it would not receive data properly if you use the traditional event listener setup for "onmessage" event. You have to use addEventListener() -
window.onmessage = function() {
// did not work in FF3
};
This is a really neat feature and I can see it being extremely useful for platform builder or widget container to share common data easily and efficiently.
7 comments:
And what if I want to postMessage to a different location? not just going to the parent and then passing directly to another iframe, like the demo does?
Hi vsync,
Not sure I understand perfectly what you are asking. I am using the parent only to retrieve the iframe reference but it is passing data directly there. postMessage() operates directly on a window object, as long as you have a reference to a window object you can invoke postMessage() against it.
Austin
I don't see how Facebook use this feature in their chat application.
I mean they need ajax anyway, whats the point.
The only use i see for thisis if I want to create an account at multiple website at the same time.
postMessage() is a great function and I have made a practical webapp that uses it and localStorage (fallback to globalStorage[location.host] in FF) to make a psuedo-globalStorage[''] object (data shared with every website) with write restrictions (user is prompted before write) but no read restrictions. The webapp is called jData and uses JSON for communication in the messages.
It seems to me that this whole HTML5 cross document messaging thing was created mainly as a secure alternative to the old trick of using a script tag to pull in data from one domain and pass it off to javascript code coming from another domain...
... and yet I've spent an hour searching online and cannot find a single example that applies to that specific situation.
Bottom line, assuming that the code for adding an "onmessage" handler is part of the overall equation, what code is required to make the other site send you the data? That is, what do you do now instead of the script tag?
Hi,
I did not find any else to contact you ....
Whatever happend to the "Radish - Indoor Solar-powered Calendar Display " project ... i am a bit intressted in the "product"
Please don hesitate to contact me
I link Wow Power Leveling and wow power leveling wow power leveling
Post a Comment