Building apps at a large company? Check out Ionic Enterprise

Themeable Browser

Improve this doc

In-app browser that allows styling.

Repo: https://github.com/initialxy/cordova-plugin-themeablebrowser

Installation

  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

Usage

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('https://ionic.io', '_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

Target

styleOptions ThemeableBrowserOptions

Themeable browser options

Returns: ThemeableBrowserObject

ThemeableBrowserObject

Instance Members

show()

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

close()

Closes the browser window.

reload()

Reloads the current page

executeScript(script)

Injects JavaScript code into the browser window.

Param Type Details
script

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

Returns: Promise<any>

insertCss(css)

Injects CSS into the browser window.

Param Type Details
css

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

Returns: Promise<any>

on(event)

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

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.

ThemeableBrowserButton

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

ThemeableBrowserOptions

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)

API

Native

General