Cordova Plugin inappbrowser : How use Cordova in Cordova Webview?

user_5311280 0
Viewed 3688
  1. I installed the plugin: In App Browser https://ionicframework.com/docs/native/in-app-browser

Documentation is here: https://github.com/apache/cordova-plugin-inappbrowser

  1. Dynamically, I created an HTML page in this directory: this.file.dataDirectory

  2. I try to load this page on the webview like this:

IMPORT

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

CONSTRUCTOR

constructor(private iab: InAppBrowser) {}

MY CODE

const browser = this.iab.create( this.webview.convertFileSrc( this.file.dataDirectory + 'jojo/index.html' ) );

Everything is ok and there aren't problems. My page jojo/index.html can load.

The page is load in the Cordova WebView

If I don't mistake, because I don't set the "target" value (the value is still "_self") my page jojo/index.html is load in the Cordova WebView. Right ?

Reference:

enter image description here

So ... on my page, I want to use ionic functions (or cordova functions).

How can I do that ?

PS: I already check this topic: Using cordova plugins in InAppBrowser and it's a different case. Their target are "_blank", so them pages are open in the InAppBrowser.

My config

This is my configuration:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/jojo/Library/Android/sdk)
   ios-deploy        : 2.0.0
   NodeJS            : v11.10.0 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

Thank you so much for your help.

inappbrowser cordova-plugins ionic-framework cordova
1 Answers

You cannot access any Cordova functions directly from an InAppBrowser window. Instead, you need to communicate between the InAppBrowser and the Cordova WebView using the (only?) method available, the message event handler.

Check out this article on how to implement the message event handler with an InAppBrowser window. In the example, you send a close message from the IAB to the WebView to instruct Cordova to close the IAB, but you can change that and send whatever messages you want, to perform different actions in the WebView side.

This is the sample code from the WebView side:

function openInAppBrowser() {
    // Open URL
    var open_url = 'http://www.sampleurl.com/sample.htm';
    inAppBrowserRef = cordova.InAppBrowser.open(open_url, '_blank', 'clearcache=yes,clearsessioncache=yes,location=yes,hardwareback=no,zoom=no');
    // Add event listener to close the InAppBrowser
    inAppBrowserRef.addEventListener('message', messageCallBack);
};

function messageCallBack(params) {
    // Close the InAppBrowser if we received the proper message
    if(params.data.action == 'close') {
        inAppBrowserRef.close();
    }
};

Refer to the article for the JS code in the InAppBrowser side, and modify it to suit your needs.

Notice you must use the 3.1.0-dev version of the inappbrowser plugin for this event handler to work.

user_1612930
Related