Cordova App: Open Link In a Browser
In Cordova app when you render a normal HTML link such as
<a href="https://jannerantala.com">JanneRantala.com</a>, it opens the link inside the app in Cordova WebView which may break the functionality of the app. Also, the target URL may be untrusted site, so opening that in WebView may have security issues as well.
If you want to open the link in external browser, you need to do some special arrangements. First of all, you need to install Cordova InAppBrowser.
Install Cordova InAppBrowser
Go to your Cordova project folder and type:
cordova plugin add cordova-plugin-inappbrowser
Call window.open With _system as a Target
With the InAppBrowser you can normally open the URL in-app, which is the default behavior of the plugin, as the name describes. However, to open the URL to the device’s default browser, you can simply use
_system as a target.
<a href="https://jannerantala.com" onclick="window.open('https://jannerantala.com', '_system'); return false;">JanneRantala.com</a>
_system as a target tells the app to open the link in the system’s default browser. The
return false; prevents the default action of the link, which is to open the link in a WebView. You might also omit the href attribute, but it is not recommended since it affects accessibility. Read more about best practices to open a new window or tab at https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Best_practices
NOTE! Using the window.open with _system requires that the window.open is overwritten with cordova.inAppBrowser.open. So make sure this is line exists at the beginning of your app.
window.open = cordova.InAppBrowser.open;
Read more about InAppBrowser at https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/index.html.