CODEWITHSUNDEEP
ionic-frameworkionic2ionic3
user2828442
user2828442

Reputation: 2525

How to hide / disable Ionic inapp browser top address bar?

I have implemented ionic inapp browser in my app. I want to hide the top bar from it. I am trying using the below code but it does not seem to work.

enter image description here

page.ts code

  openWebpage(url: string) {
    const browser = this.inAppBrowser.create('http://sco7.com/filemanager/sapphire/','_self','toolbar=no');
    const options: InAppBrowserOptions = {
      zoom: 'no',
      location: 'no',
      toolbar: 'no'
    }

  }

I have added toolbar=no but still top address bar is visible.

Upvotes: 2

Views: 9714

Answers (3)

Karl king
Karl king

Reputation: 11

openWebpage(url: string) {
    const options: InAppBrowserOptions = {
      zoom: 'no',
      fullscreen: "yes",
      hidenavigationbuttons: "no",
      toolbar:'no',
      hideurlbar: 'yes',
    }

    // Opening a URL and returning an InAppBrowserObject
    const browser = this.inAppBrowser.create(url, '_blank',{ toolbar: 'no',  hideurlbar: 'yes',
    fullscreen: "yes",location:"no", options});

    browser.on('loadstop').subscribe(event => {
      browser.insertCSS({ code: "toolbar{display: none;" });
    });


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

like this way shall appear what you wanna hidden or control!

Upvotes: 1

Anoop M Maddasseri
Anoop M Maddasseri

Reputation: 10559

Either you can apply InAppBrowserOptions in in-app-browser

  private openBrowser(url: string, title?: string) {
    let options: InAppBrowserOptions = {
      toolbarcolor: "#488aff",
      hideurlbar: "yes",
      closebuttoncolor: "#fff",
      navigationbuttoncolor: "#fff"
    };
    const browser = this.iab.create(url, "_blank", options);
  }

or you can use the highly customizable themeable-browser which built on top of in-app-browser

// can add options from the original InAppBrowser in a JavaScript object form (not string)
// This options object also takes additional parameters introduced by the ThemeableBrowser plugin
// This example only shows the additional parameters for ThemeableBrowser
// Note that that `image` and `imagePressed` values refer to resources that are stored in your app
const options: ThemeableBrowserOptions = {
     statusbar: {
         color: '#ffffffff'
     },
     toolbar: {
         height: 44,
         color: '#f0f0f0ff'
     },
     title: {
         color: '#003264ff',
         showPageTitle: true
     },
     backButton: {
         image: 'back',
         imagePressed: 'back_pressed',
         align: 'left',
         event: 'backPressed'
     },
     forwardButton: {
         image: 'forward',
         imagePressed: 'forward_pressed',
         align: 'left',
         event: 'forwardPressed'
     },
     closeButton: {
         image: 'close',
         imagePressed: 'close_pressed',
         align: 'left',
         event: 'closePressed'
     },
     customButtons: [
         {
             image: 'share',
             imagePressed: 'share_pressed',
             align: 'right',
             event: 'sharePressed'
         }
     ],
     menu: {
         image: 'menu',
         imagePressed: 'menu_pressed',
         title: 'Test',
         cancel: 'Cancel',
         align: 'right',
         items: [
             {
                 event: 'helloPressed',
                 label: 'Hello World!'
             },
             {
                 event: 'testPressed',
                 label: 'Test!'
             }
         ]
     },
     backButtonCanClose: true
};

const browser: ThemeableBrowserObject = this.themeableBrowser.create('https://ionic.io', '_blank', options);

Upvotes: 0

Gabriel Barreto
Gabriel Barreto

Reputation: 6421

The code you shared is the code you use to create an inAppBrowser? If so you need to declare your options const before the creation of your inAppBrowser:

openWebpage(url: string) {
    const options: InAppBrowserOptions = {
      zoom: 'no',
      location: 'no',
      toolbar: 'no'
    };
    const browser = this.inAppBrowser.create('http://sco7.com/filemanager/sapphire/','_self','toolbar=no');
  }

Doing so i was able to open and an browser window without the URL bar.

Also using 'toolbar=no' is wrong since toolbar is one of the options property and it needs to be a string, toolbar doesn't need to be part of the string. An alternative is using simply an object with the location property:

this.inAppBrowser.create('http://sco7.com/filemanager/sapphire/','_self',{ toolbar: 'no'});

Hope this helps.

Upvotes: 2

Related Questions