Flutterian
Flutterian

Reputation: 1781

Ionic 3- how to open external url in device default browser

I want to open external url in device default browser. Like for android it should get open in chrome and for ios it should open in safari.

Initially when I tried window.open(url,"_system") it was working fine with android. When I tried in ios, it wasn't working.

After some research, I came to know that due to popup block nature of safari, it wasn't opening. Then I disabled the pop-up block setting. Still issue was there. Later I came to know that I need to install InAppBrowser plugin to make it workable.

Hence I followed below steps

ionic cordova plugin add cordova-plugin-inappbrowser

npm install --save @ionic-native/in-app-browser

Added provider in app.module.ts file

After installation of plugin, app started crashing on android device. (Not checked on ios).

I don't know the reason. If I remove the plugin, application is working but now I am not able to open url in android also.

Can anyone please tell me how to open external url in android and ios?

Configuration

1. ionic - v3

2. Angular - v6

3. cordova - v8

Upvotes: 3

Views: 5303

Answers (2)

AbdulAzeem
AbdulAzeem

Reputation: 529

change this in config.xml

<preference name="FadeSplashScreen" value="false" />
<preference name="AutoHideSplashScreen" value="false" />

and in app.component.ts

initializeApp() {
this.platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  this.statusBar.styleDefault();
  this.splashScreen.hide();
});
}

Upvotes: 1

Prashant
Prashant

Reputation: 1385

Here is solution that worked for me in V3 with App Browser Plugin

<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
      }

Upvotes: 2

Related Questions