Ionic InAppBrowser Open App

Ionic Framework ionic-v3
1

Hi,

So I recently set up an Ionic App using the InAppBrowser plugin. When the app loads, it automatically points to a website.

My question is, on the website there are Social Media links, e.g. to Twitter, is there anyway I can change the button to open the actual Twitter App if the user has it installed on their phone?

Currently when I click the Twitter button it takes me to the Twitter webpage through the InAppBrowser.

Thanks in advance!

2 
import {Platform, Page} from 'ionic-framework/ionic';


@Page({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

    static get parameters() {
        return [[Platform]];
    }

    constructor(platform) {
        this.platform = platform;
    }

    launch(url) {
        this.platform.ready().then(() => {
            cordova.InAppBrowser.open(url, "_system", "location=true");
        });
    }
}

On HTML side

<ion-navbar *navbar>
    <ion-title>
        Home
    </ion-title>
</ion-navbar>

<ion-content class="home">
    <button (click)="launch('https://www.twitter.com')">Twitter</button>
</ion-content>
3

Hi,

My layout seems to be slightly different to yours and I have already done something like that. Let me further explain, I have already used InAppBrowser to open a website, the Twitter button is an actual button on the website not within the Ionic project if that makes sense.

So far the app loads and will instantly open an InAppBrowser (done using the ionViewDidLoad() function in home.ts).

Below is my code:
home.html

<ion-header>
  <ion-navbar color="dark">
    <ion-title>
      InAppBrowser
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  InAppBrowser Not Displayed.

</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser, InAppBrowserOptions } from "@ionic-native/in-app-browser";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private inAppBrowser: InAppBrowser) {
  }

  openWebpage(){
	  
	  const options: InAppBrowserOptions = {
		  toolbar: 'no',
		  location: 'no',
		  zoom: 'no'
	  }
	  const browser = this.inAppBrowser.create("a website with twitter button link", '_self', options);
  }
  
  ionViewDidLoad() {
    this.openWebpage();
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { InAppBrowser } from '@ionic-native/in-app-browser';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
	InAppBrowser
  ]
})
export class AppModule {}
4

Hi… @t3ch3 ,
Have u already find the solution ?
I also have the same problem, failed to load Facebook Apps and Instagram Apps when user click facebook and instagram button from the website.
Thanks.

5

@sciu No unfortunately I haven’t. I tried working with the InAppBrowser event ‘loadstart’, it triggers when it loads a new URL.

Every time it triggered I would check if the URL was equal to a twitter URL, if yes then open the URL inside the app. However, I had some issues where the function I subscribed to the event would get removed after the first trigger. Also it would still open the URL inside the InAppBrowser too.

Maybe you can get it to work with that method.

Can find the events here : https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/

6

Hi
may i ask did you solve this issue?
i have the same problem
with beforeload it doesnt work. actually beforeload doesnt fire up (even added beforeload: ‘yes’ in option) thats common error.

thanks by advance

1 Like