In Cordova app when you render a normal HTML link such as <a href="https://fullstack-tutorials.com">FullstackTutorials.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.
Go to your Cordova project folder and type:
cordova plugin add cordova-plugin-inappbrowser
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://fullstack-tutorials.com"
onclick="window.open('https://fullstack-tutorials.com', '_system'); return false;"
>FullstackTutorials.com</a>
The _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