An example JavaScript widget demonstrating script loading, css reset, and JSONP
JavaScript PHP
Latest commit 6c573c8 Jan 31, 2012 @jjulian typo
Failed to load latest commit information.
server capture the url of the site where the widget is installed Jan 31, 2012
README.markdown Initial commit of working example code Jan 31, 2012


Building 3rd Party Widgets with JavaScript

Example code prepared for the Baltimore JavaScript Meetup January 31 2012

This example code will run in a PHP container (Apache). The 'server' dir is the document root. The 'client/index.html' is the reference implementation of the widget, embedded in another site. Open client/index.html in a browser (open the file directly) and interact with the server widget.

Important Concepts

  • the widget loads its own js and css, including jQuery from a CDN
  • cleanslate is used to reset the style of the widget container
  • an anonymous function is used to keep all of the widget code from colliding with client code on the host page
  • JSONP is used to send information back to the server (more sophisticated techniques exist, like CORS or PostMessage)
  • the JSONP destination is actually a PHP script