Launching external protocols from anchors.

protocol.html

<p><a href="//facebook.com/119703784116" data-external="fb://profile/119703784116">Facebook</a>

<p><a href="//foursquare.com/v/4e4b3090fa7671a85ce77d0e" data-external="foursquare://venues/4e4b3090fa7671a85ce77d0e">Foursquare</a>

<p><a href="//twitter.com/oisfinc" data-external="twitter:/user?screen_name=oisfinc">Twitter</a>

<p><a href="//yelp.com/biz/orange-international-street-fair-orange" data-external="yelp:/biz/orange-international-street-fair-orange">Yelp</a>

<p><a href="//example.com/foo" data-external="example:/foo">Example</a>

<script>
window.addEventListener('click', function (event) {
	var target = event.target;

	// bubble up to the nearest anchor
	while (target && target.nodeName !== 'A') {
		target = target.parentNode;
	}

	// if an anchor exists with an external href, and the user would like to launch
	if (target && target.hasAttribute('data-external') && confirm('Launch the external application?')) {
		// cancel the href
		event.preventDefault();

		// launch
		location.href = target.getAttribute('data-external');
	}
});
</script>