example/index.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>PostIt</title>
	</head>

	<body>
		<button id="postIt">PostIt</button>

		<iframe src="iframe.html" width="300" height="300"></iframe>

		<!-- Scripts -->
		<script src="../dist/postit.js"></script>
		<script>
			(function() {
				'use strict';

				/**
				 * @note Always specify a more explicit target `origin`, not `*`, when utilizing `postMessage` to send data.
				 */

				var postItElem = document.getElementById('postIt');

				PostIt
					// Creates and manages a `PostIt` instance.
					.add('foo')

					// Registers a `listener` to a `PostIt` instance, for a given `event`.
					.on('foo', 'bar', function(event) {
						postItElem.innerHTML = event.dataParsed.message;

						// Emits an `event` to all listeners registered to a `PostIt` instance, for a given `event`.
						PostIt.emit('foo', 'baz', event.source, { message: 'Message from `index.html`' }, '*');
					})

					// Registers a `listener` to a `PostIt` instance, for all given `event`s.
					.on('foo', '*', function(event) {
						console.log('[foo.*]', event.dataParsed);
					});

				postItElem.addEventListener('click', function() {
					PostIt.openWindow('window.html', 'PostIt', {
						width: 700,
						height: 500
					});
				}, false);
			})();
		</script>
	</body>
</html>