Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Launching external protocols from anchors.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment