window.postMessage Tip: Child-To-Parent Communication
I wrote a super epic post a few months back about the
window.postMessage API that's sweeping the nation.
window.postMessage allows you to send messages not only across frames (regular frame or iframe) but also across domains. My post showed interaction from parent to child and back to the parent, but didn't detail passing messages from a child to a parent without the parent initializing the conversation. Let me show you how you can initialize that conversation from child to parent
The parent object provides a reference to the main window from the child. So if I have an iFrame and console the parent within it, the console will read:
// Every two seconds....
// Send the message "Hello" to the parent window
// ...if the domain is still "davidwalsh.name"
Since we now have hold of the window, we can postMessage to it:
// 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
console.log('parent received message!: ',e.data);
The directive above triggers the iFrame to send a message to the parent window every 3 seconds. No initial message from the main window needed!
Save 20% with discount code
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?...
Some of the finest parts of web apps are hidden in the little things. These "small details" can often add up to big, big gains. One of those small gains can be found in keyboard shortcuts. Awesome web apps like Gmail and GitHub use loads of...
A few of my customer have asked for me to create a subtle but dynamic (...I know...) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick...
I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately. Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...
When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door. But as my career has gone on, I've been more aware of money, investing, and retirement. I've recently...
One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...
Visuals are everything when it comes to media. When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available. When I'm looking to download a video on my computer,...
A new and exciting website has recently been launched for web designers and developers.
You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...