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>

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.


Did you find this tutorial helpful? Please share:

What we do?

We do full-stack development. We develop web applications and mobile apps ranging from industrial-grade ERP systems to online auction websites. We use the most modern programming and project management techniques to produce a high-value product in time.

See References

The Stack

Read more

Full Stack development

We develop web applications and mobile apps ranging from industrial-grade ERP systems to online auction websites. We use the most modern programming and project management techniques to produce a high-value product in time.

See References