CrossFrame: a Safe Communication Mechanism Across Documents and Across Domains
Written by on November 27th, 2007 in Ajax News.
Julien Lecomte has written about CrossSafe, a “safe communication mechanism across documents and across domains”.
We already have some solutions such as the URL fragment identifier or the Flash LocalConnection object, so why did Julien see the need for this?
CrossFrame is a variant of the URL fragment identifier mechanism. In the original technique, the containing page sets the URL fragment identifier of an embedded IFrame (usually via its
srcattribute), and the IFrame must poll to detect changes in the value of itslocation.hashproperty. This technique can be further built upon to allow for 2-way communications between an IFrame and its containing page, or between two distinct IFrames.The original URL fragment identifier technique has many limitations, many of which can be worked around except maybe for the following:
- It unnecessarily consumes CPU cycles by requiring the receiver to poll.
- It creates “fake” history entries on Safari and Opera.
How does CrossFrame work?
While CrossFrame also has limitations of its own, I find it to be a much cleaner and simpler approach. Here is how it works:
In order to communicate with the mashup hosted in domain Y, the page, hosted in domain X, dynamically creates a hidden IFrame and points it to a special proxy file hosted in domain Y, using the URL fragment identifier to convey the message (step 1) When the special proxy file is loaded in the hidden IFrame, it reads its URL fragment identifier and passes it to a globally accessible function defined in the IFrame hosting the mashup (step 2) using
parent.frames['mashup']to get to it. The same technique can also be used by the mashup to communicate with the page (the proxy will useparent.parentto get to the page) Finally, when all is said and done, the hidden IFrame is automatically removed from the DOM by the library.
To send and receive messages you use the following JavaScript:
-
-
// To receive messages, subscribe to the onMessage event:
-
YAHOO.util.CrossFrame.onMessageEvent.subscribe(
-
function (type, args, obj) {
-
var message = args[0];
-
var domain = args[1];
-
// Do something with the incoming message…
-
}
-
);
-
// To send a message, call YAHOO.util.CrossFrame.send():
-
YAHOO.util.CrossFrame.send(”http://www.y.com/proxy.html”,
-
”frames['mashup']“,
-
”message”);
-
Check out the demo, and they read that Julien doesn’t think that ou should use it 
Source: Ajaxian
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/191669174/crossframe-a-safe-communication-mechanism-across-documents-and-across-domains