Supporting the onMessage Event in MooTools

By  on  

Yesterday I threw some window.postMessage knowledge right in your face.  The cross frame/window/domain technology that is window.postMessage is really interesting and as IE6 and IE7 fade away, window.postMessage will gain more momentum.  In looking to listen to onMessage events with MooTools, I noticed that message events aren't  handled properly.  The event type is seen as message but the event.data, event.source, and event.origin aren't added to the main-level object -- they're relegated to event.event.  It's time to fix that using MooTools custom events.

The MooTools JavaScript

Element.NativeEvents.message = 2;
Element.Events.message = {
	base: 'message',
	condition: function(event) {
		//if(event.type == 'message') {
		if(!event.$message_extended) {
			event.data = event.event.data;
			event.source = event.event.source;
			event.origin = event.event.origin;
			event.$message_extended = true;
		}
		return true;
	}
};

Regardless of whether or not the event type is within the Element.NativeEvents.message object, its value always matches what's provided by the browser, minus the "on" prefix.  With that in mind, creating a "custom" message event with "message" as the base is the way to go.  The condition portion of the custom event is met by the type being "message," so the only check is that the event hasn't been handled already.  If the condition is met, I move references to the data, origin, and source to the event object's first level to mimic the tradition message event. As an added bonus, if existing properties are undefined, I set their value to false.

The power of custom MooTools events is awesome.  window.onMessage is rarely used due to IE6 and IE7's crap and the lack of use case so onMessage may not be worth adding the code to Core.  If you do, however, need this functionality...here you go!

Recent Features

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    MooTools-Like Element Creation in jQuery

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out...

  • By
    Using Opacity to Show Focus with MooTools

    I'm a huge fan of using subtle effects like link nudging (jQuery, MooTools) to enhance the user experience and increase the perceived dynamism of my websites. Trust me -- a lot of little things are what take websites to the next level.

Discussion

  1. I was entirely confused why window.addEvent( 'message', function(event) { ... }) was not working.
    This plugin is exactly what I needed, and now I know about Element.Events. Thanks!

    I am confused by the code comment //if(event.type == 'message') { and your post The condition portion of the custom event is met by the type being “message,” so the only check is that the event hasn’t been handled already..

    Is it necessary to check the type of the event when using MooTools custom events?
    Or, on the other hand, can I just remove that comment?

  2. What is the purpose of setting undefined values to false?

    for(key in event) {
        if(event[key] == undefined) {
            event[key] = false;
    }
    

    This modifies, for example, the alt, client, page, relatedTarget properties of the event object.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!