2

I have created a hosted app using this tutorial: Microsoft Tutorial Page

In this web app, there is <a href> link available which opens Google Map like:

<a href=""https://maps.google.com/?q=" + myAddressString target="_system"> Address URL </a>

While tapping on this href, it puts my app in background mode and opens map either in GoogleMap application or in Safari browser.

But sometimes, the same link opens the map URL in my hosted cordova app webview itself, due to that, my app went away and user does not get any way-around to return back to my application.

Can anyone please suggest how to embedd map url into hosted web app.

Note: I have already used InAppBrowser cordova plugin into my app.

Config file:

<access origin="*" /> <access origin="http://*/*" /> <access origin="https://*/*" /> <access origin="content:///*" /> <access origin="https://*google.com/*" /> <access origin="https://maps.google.com/*" /> <access origin="https://*.mywebsite.com/*" /> <access origin="https://*.myotherwebsite.com/*" /> <access origin="https://accounts.mywebsite.com/*" /> <access origin="https://accounts.myotherwebsite.com/*" /> <access origin="https://officerapp.mywebsite.com/*" /> <access origin="https://officerapp.myotherwebsite.com/*" /> <allow-intent href="*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="https://*google.com/*" /> <allow-intent href="https://maps.google.com/*" /> <allow-intent href="https://accounts.mywebsite.com/*" /> <allow-intent href="https://accounts.myotherwebsite.com/*" /> <allow-intent href="https://officerapp.mywebsite.com/*" /> <allow-intent href="https://officerapp.myotherwebsite.com/*" /> <allow-navigation href="https://accounts.mywebsite.com/*" /> <allow-navigation href="https://accounts.myotherwebsite.com/*" /> <allow-navigation href="https://myapp.mywebsite.com/*" /> <allow-navigation href="https://myapp.myotherwebsite.com/*" />

Mrunal
  • 13,982
  • 6
  • 52
  • 96
  • Hi, How did you resolve it? I'm facing the same issue – Siddaram H Jul 08 '19 at 15:04
  • Few things required, `allow-navigation` and `allow-intent` for specific domains. If hyperlink then add `target="_blank"` to `a href`. And update Meta tag for root page with Content Security Policy which can allow another websites to connect with if request domain is different. – Mrunal Jul 11 '19 at 13:04

2 Answers2

1

This is pretty simple to do, try to open it as if you open the link in a new tab. Just add this attribute to your code:

target="_blank"

So, you have:

<a href=""https://maps.google.com/?q=" + myAddressString target="_blank"> Address URL </a>
Arthur Guiot
  • 713
  • 10
  • 25
1

First make sure you don't have any of this in your config.xml

<allow-navigation href="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />

This tags allow the navigation to http, https or anything inside your app

And then add

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

This launches the external browser for anything that starts with http or https

jcesarmobile
  • 51,328
  • 11
  • 132
  • 176
  • All of them? then you have to remove the `allow-navigation` ones – jcesarmobile May 24 '17 at 08:29
  • Allow-navigations are not there in my config with *. I have three allow-navigations but those are only for my webapp. – Mrunal May 24 '17 at 09:11
  • can you share your config.xml? – jcesarmobile May 24 '17 at 09:12
  • Added to question. – Mrunal May 24 '17 at 09:15
  • If you say that sometimes it works and sometimes it doesn't, it looks like a bug. You should consider using InAppBrowser plugin to open the links. You can do something like this: `var links = document.links; for (var i = 0; i < links.length; i++) { links[i].onclick = function(event){ event.preventDefault(); cordova.InAppBrowser.open(this.href, '_system'); } }` https://codepen.io/anon/pen/BRMPow – jcesarmobile May 24 '17 at 09:43