Themeable Browser

Improve this doc

In-app browser that allows styling.



  1. Install the Cordova and Ionic Native plugins:
    $ ionic cordova plugin add cordova-plugin-themeablebrowser
    $ npm install --save @ionic-native/themeable-browser
  2. Add this plugin to your app's module

Supported platforms


import { ThemeableBrowser, ThemeableBrowserOptions, ThemeableBrowserObject } from '@ionic-native/themeable-browser';

constructor(private themeableBrowser: ThemeableBrowser) { }


// 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('', '_blank', options);

We suggest that you refer to the plugin's repository for additional information on usage that may not be covered here.

Instance Members

create(url, target, styleOptions)

Creates a browser instance

Param Type Details
url string

URL to open

target string


styleOptions ThemeableBrowserOptions

Themeable browser options

Returns: ThemeableBrowserObject


Instance Members


Displays an browser window that was opened hidden. Calling this has no effect if the browser was already visible.


Closes the browser window.


Reloads the current page


Injects JavaScript code into the browser window.

Param Type Details

Details of the script to run, specifying either a file or code key.

Returns: Promise<any>


Injects CSS into the browser window.

Param Type Details

Details of the script to run, specifying either a file or code key.

Returns: Promise<any>


A method that allows you to listen to events happening in the browser. Available events are: ThemeableBrowserError, ThemeableBrowserWarning, critical, loadfail, unexpected, undefined

Param Type Details

Event name

Returns: Observable<any> Returns back an observable that will listen to the event on subscribe, and will stop listening to the event on unsubscribe.


Param Type Details
wwwImage string (optional)
image string (optional)
wwwImagePressed string (optional)
imagePressed string (optional)
wwwImageDensity number (optional)
align string (optional)
event string (optional)


Param Type Details
statusbar { color: string; } (optional)
toolbar { height?: number; color?: string; image?: string; } (optional)
title { color?: string; staticText?: string; showPageTitle?: boolean; } (optional)
backButton ThemeableBrowserButton (optional)
forwardButton ThemeableBrowserButton (optional)
closeButton ThemeableBrowserButton (optional)
customButtons ThemeableBrowserButton[] (optional)
menu { image?: string; imagePressed?: string; title?: string; cancel?: string; align?: string; items?: { event: string; label: string; }[]; } (optional)
backButtonCanClose boolean (optional)
disableAnimation boolean (optional)
location string (optional)
hidden string (optional)
clearcache string (optional)
clearsessioncache string (optional)
zoom string (optional)
hardwareback string (optional)
mediaPlaybackRequiresUserAction string (optional)
shouldPauseOnSuspsend string (optional)
closebuttoncaption string (optional)
disallowoverscroll string (optional)
enableViewportScale string (optional)
allowInlineMediaPlayback string (optional)
keyboardDisplayRequiresUserAction string (optional)
suppressesIncrementalRendering string (optional)
presentationstyle string (optional)
transitionstyle string (optional)
toolbarposition string (optional)
fullscreen string (optional)