Ionic application open link in system browser

Question

I want to open the link in the system browser, for example in ios in safari and for android chrome(whatever the default browser is).

The problem i'm having the that the link does indeed opens in the system browser but it also open in the application. I want the link only to open in the system browser and not inside the app.

this is my code.

<a ng-href="http://example.com/login/{{user._id}}" onclick="window.open(this.href, '_system', 'location=yes')" class="ion-home color-primary item"> Dashboard</a>

Keep in mind that im also passing an id to my endpoint.

Answer 1

try

<a class="ion-home color-primary item" href="#" onclick="window.open('http://example.com/login/{{user._id}}', '_system', 'location=yes'); return false;"> Dashboard</a>

Answer 2

In newer(3.0) version In App Browser Plugin is better solution.

<button ion-button block clear (click)="openWebpage(url)">Open Webpage</button>

and the openWebpage method goes like this

 openWebpage(url: string) {
        const options: InAppBrowserOptions = {
          zoom: 'no'
        }

        // Opening a URL and returning an InAppBrowserObject
        const browser = this.inAppBrowser.create(url, '_self', options);

       // Inject scripts, css and more with browser.X
      }

Answer 3

You can do it with InAppBrowser plugin https://cordova.apache.org/docs/en/3.0.0/cordova/inappbrowser/inappbrowser.html

If you for some reason don't want to use plugin, check out my answer on similar question: https://stackoverflow.com/a/30397786/1630623

EDIT: if you are already using the plugin, you might have to either remove the onclick code and add target="_system", or add event.preventDefault(); in the onclick handler

Answer 4

Capacitor has an easy to use plugin for launching an in-app browser.

https://capacitorjs.com/docs/apis/browser

Installation:

npm install @capacitor/browser
npx cap sync

Usage:

import { Browser } from '@capacitor/browser';

const openCapacitorSite = async () => {
    await Browser.open({ url: 'http://capacitorjs.com/' });
};