Open an external link to map

I want to very simply open a link in the device browser or maps app:


<allow-intent href="http://*/*" launch-external="yes"/>
<allow-intent href="https://*/*" launch-external="yes"/>


<a id="my-link" href="" class="link external">Get Directions</a>

I build the directions link dynamically and set like this:

$$('#my-link').attr('href', ''+originlatlng+'&destination='+ destinationlatlng);

This works when testing in desktop browser through phonegap app but not on device…
What am I doing wrong!?

I figured this out …

cordova plugin add cordova-plugin-inappbrowser

intercept clicks for external links and use :

$$(document).on('deviceready', function() { =;
  $$(document).on('click', function (e) {
    var $t = $$(;
    if ( $'a') && $t.hasClass('external') ) {
      e.preventDefault();$t.attr('href'), '_system');

Use standard html markup like this :

<a href="{{mpaurl}}" class="link external">Get Directions</a>

( This also works for mailto: and tel: links )

1 Like

I’m experiencing a strange thing… Using the click intercepting method I posted above, I’m now trying to just open a site link in the device native browser. For some reason I can only get this to work if the link tag does not contain anything other than text. Any ideas @nolimits4web ?

  <!-- This works -->
  <a href="{{url}}" class="link external">External Link</a>
  <!-- This does not work -->
  <a href="{{url}}" class="item-link item-content external">
    <div class="item-media"><img src="{{icon}}" width="44px"></div>
    <div class="item-inner">
      <div class="item-title-row">
        <div class="item-title">{{name}}</div>
      <div class="item-subtitle">{{urldisplay}}</div>

The problem seems to be that a click event is not fired on an <a> tag if if wraps around another element. How can I combat this?

There is no any difference in both of this links, i mean there is no something specific about it. Actually F7 has built-in handler for external links with InAppBrowser. Try to remove your code you use to handle such links and just add target="_system" to your external links


I can’t believe I spent the best past of the day hacking at this. The problem with using the $$(document).on('click', function (e) {} method I had to intercept the clicks is that was the immediate element under the click and not always the link element with the href.

I saw that F7 had some built in external link handling but I couldn’t get this to work. So target="_system" was what I needed… I could have saved so much time! Thank you, I’ll know for next time.

1 Like

Yes, global events are tricky, in this case you may use second argument to pass context:

$$(document).on('click', 'a.external', function (e) {
  // still can be some element that is inside of a link
  // but "this" here always refer to a.external
  var url = $(this).attr('href');

That is for future cases

1 Like

I’ve had a similar problem. I use arrow functions which override “this”. In jquery I could use event.currentTarget. Is that something that could be added to Dom7? :smiley:

It won’t be added to Dom7 as it will bring just extra complexity to the library code. Solution is simple, just don’t use arrow functions when you need “this” :wink: