In the early days of the Internet, websites were static islands of information in an ocean of web-pages, each one keeping to itself and not connecting. What became known as Web 2.0 changed all of that. Sites became active inquisitors of other sites, making them rich and dynamic repositories of the web’s data, and behaving more like native apps.
These days, the web is being populated with a number of smaller, more accessible technologies that people can mix and match to form an infrastructure to build specialized solutions that David Weinberger has described as “Small Pieces Loosely Joined” [1].
Adding rich content through iFrames
One way to harness these diverse applications is by embedding them into a website using iFrames. This is often done when you embed media, such as YouTube on your site. The iFrame carves out some space on your page and loads another web-app (in this case a media player) to play the video. This is a completely opaque process to you and aside from the URL, you do not need to know anything about the complex processes involved in playing a video.
The only downside to this approach is that you have to rely on that app without being able to have much control over it from your webpage. It just sits in the iFrame like a miniature version of a browser. To truly take advantage of the distributed nature of the web, we really need to be able to control the iframed app from the webpage and vice-versa.
Thankfully, there is a way to communicate to these useful, but opaque “black boxes.” When HTML5 was released in 2014, it contained a little used, but very powerful capability that allowed web pages to communicate directly with other web pages and iFrames currently open in the browser.
Cross-domain messaging
Cross-domain messaging [2] makes it easy for apps to send information between one another, and the implications are as powerful as they are obscure. If both sides (the host page and the iFrame) agree to be receptive to incoming messages, then a rich dialogue can occur between them. For example, a click on somewhere on the host page could cause a video iFrame to play at a certain point, and stopping the video could cause some new information to appear in the host page.
The beauty of this process is that neither side needs permission from its author for this dialogue. Either side can react to whatever messages it wants to. If one sends a message that the other doesn’t know or want to acknowledge, that message is simply ignored.
At UVA, we’ve been successfully using the messaging technique to create complex interactions between our various historical visualization tools, allowing anyone to extend our products by creating small web-pages that react and send messages to create functionality that is important to them. We publish the kinds of messages we send out, and those we will react to, so people can extend our tools without needing our help or permission.
SCALE’s use of messaging
A good example of messaging can be found in our new Student-Centered Adaptive Learning Environment (SCALE) web-app. SCALE is a platform for delivering adaptive instruction online and provides a framework that guides the learner through the instructional content using rich interactive media embedded using iFrames.
Any webpage we embed is constantly scanned for incoming messages to perform actions in SCALE, such as moving the learner through the course, setting what they will view next, and what they can skip. For example, we have embedded a simple graphing calculator that we found on GitHub, and quickly added the ability for SCALE to tell it what equation to graph, and report back to SCALE what equation they typed. SCALE can then alter the direction of instruction based on their answer.
For more information about SCALE, see our website: www.viseyes.org.scale.
[1] Weinberger, D. (2002). Small Pieces Loosely Joined (a unified theory of the web): New York: Perseus Books.
[2] Cross-domain tutorial: http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
About Bill Ferster
Bill Ferster is a research professor at the University of Virginia and a technology consultant for organizations using web-applications for ed-tech, data visualization, and digital media. He is the author of Sage on the Screen (2016, Johns Hopkins), Teaching Machines (2014, Johns Hopkins), and Interactive Visualization (2012, MIT Press), and has founded a number of high-technology startups in past lives. For more information, see www.stagetools.com/bill.