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

Question

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

Answer 1

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.

Answer 2

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!

Answer 3

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);