InAppBrowser not opening in Ionic React App

Question

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

useEffect(() => {
  const browser = InAppBrowser.create('https://ionicframework.com', '_blank');
}, [//deps])

I cannot use the Browser plugin of capacitor as I need to execute a few line of code in the InAppBrowser.

As per the Ionic Docs, it says they support Cordova plugins, but this does not do anything.

I am new to Ionic, am I missing something??

score 3 · Answer 1 · answered Aug 18 '20 at 00:29

3

InAppBrowser is a cordova plugin. I would recommend using Capacitor's plugin Browser

For this, you will need to import Browser plugin from Capacitor.

import { Plugins } from '@capacitor/core';

const { Browser } = Plugins;

...

<IonButton onClick={
  async() => await Browser.open({
    url: 'http://capacitorjs.com/'
  });
}>Open Browser</IonButton>

answered Aug 18 '20 at 00:29

scriobh

868
10
25

I would like to execute a script in the cap browser, is there. a way to do it. As I dont anything in the docs – elvis_ferns Aug 18 '20 at 11:03
If you go into the interface of `Browser` plugin, you can see what all functions it supports. I'm sure you can do that using `addListener()` function. @elvis_ferns ` – scriobh Aug 18 '20 at 20:43

score 0 · Answer 2 · answered Sep 28 '20 at 19:43

You just need browser.show() to open the window . Execute scripts first then show it , Going through the docs you can use Options to configure the view little bit . I couldn't find a way to use InAppBrowser as React Component or something like that , .

import React from 'react';
import { IonPage, IonButton } from '@ionic/react';
import { InAppBrowser,InAppBrowserOptions } from '@ionic-native/in-app-browser';

const Browser: React.FC = () => {

    const options:InAppBrowserOptions = {
        location: 'no',
        zoom: 'no',
        hideurlbar: 'yes',
        toolbarposition: 'bottom'
    } 

    const openBrowser = (url: string) => {
        const browser = InAppBrowser.create(url,'_self',options);
        // browser.executeScript(your script) // Docs aren't clear to me and i haven't tested
        browser.show()
    }

    return (
        <IonPage>
            <IonButton onClick={()=> openBrowser('https://google.com')}>Open InAppBrowser</IonButton>
        </IonPage>
    );
};

InAppBrowser not opening in Ionic React App

2 Answers2