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.

score 36 · Answer 1 · answered Feb 22 '16 at 20:13

36

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>

answered Feb 22 '16 at 20:13

Santiago

719
7
11

do we need a plugin with this option? – Miguel Carvajal Jan 16 '17 at 14:55
No. It should open on the device's default browser. You may need a plugin if you want to open a window without leaving your app. – Santiago Jan 17 '17 at 17:04
This worked great for me. In my case, I needed to open links using the device browser because I wanted the users to be able to find texts within the document. And I wasn't able to do it using inAppBrowser – Alfonso Apr 09 '18 at 21:12
In ionic 4, this method opens the URL in the App on Android, and not at all in iOS. I'm not going to downvote this answer since Ionic has changed, but the InAppBrowser plugin works much better. – BIBD Aug 26 '19 at 20:12
hey your solution worked for me too, but can you please explain what _system and location=yes do? – Parth Savaliya Apr 27 '20 at 10:45

score 9 · Answer 2 · answered Mar 28 '18 at 08:32

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
      }

The target should not be '_self'. It should be '_system' to fulfill the actual question. — Mark McCorkle, Mar 15 '20 at 18:18

score 6 · Answer 3 · edited May 23 '17 at 12:02

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

score 5 · Answer 4 · answered Feb 21 '22 at 15:10

5

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/' });
};

answered Feb 21 '22 at 15:10

Tobija Fischer

186
3
8

1

For most cross-platform purposes, this is the most reliable solution I have found. It also has the added bonus of showing "Done" buttons on mobile that allow you to return to the app. – Alec Daling May 02 '22 at 13:04

score 2 · Answer 5 · answered Aug 03 '20 at 17:46

2

Simple Solution

<a href="#" onclick="window.open('https://www.badhaobusiness.in',
     '_system', 'location=yes'); return false;"> www.badhaobusiness.in</a>

answered Aug 03 '20 at 17:46

Shashwat Gupta

5,071
41
33

score 0 · Answer 6 · answered May 22 '22 at 10:37

Use this method in ActionSheet to open link in another browser:

import { ActionSheetController} from '@ionic/angular';

...
constructor(public actionSheet: ActionSheetController) {}

async presentActionSheet() {
 const action = await this.actionSheet.create({
  buttons: [{
    text: 'Open link',
    icon: 'link-outline'
    handler: () => {
      window.open('http://google.com');
     }
    }]
  });
   await action.present();
 }
}

score 0 · Answer 7 · answered May 24 '23 at 15:10

0

This is the simplest solution:

<a href="https://google.com/" target="_blank">google.com</a>

answered May 24 '23 at 15:10

Jurakin

832
1
5
19

Ionic application open link in system browser

7 Answers7

Linked