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@4
   

2. Add this plugin to your app's module

Supported platforms

• Amazon Fire OS
• Android
• Blackberry 10
• Browser
• FirefoxOS
• iOS
• Ubuntu
• Windows
• Windows Phone

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

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.

insertCss(css)

Injects CSS into the browser window.

on(event)

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

ThemeableBrowserButton

ThemeableBrowserOptions