kunder-lab / cl.kunder.webview

This cordova plugin enables you to open a second webview

kunder-cordova-plugin-webview

This cordova plugin enables you to open a second webview in your app. This webview is totally independent from the main webview, but allows you tu access plugins and other Cordova resources.

It's possible to modify this plugin to allow multiple webviews.

Report issues on github issue tracker

Installation

    cordova plugin add https://github.com/kunder-lab/cl.kunder.webview.git

Supported Platforms

• Android
• iOS

Quick Start

To open a new webview, just call in your app's js:

    webview.Show(URL);

Where URL is the path to the page to be opened. In Android, the plugin automatically adds the prefix file:///android_asset/www/ But only if no *:// or javascript: is present at the front of the URL.

Then, to close the second webview and return to the main view, call in your second webview (the opened webview, not the main webview):

    webview.Close();

This will close and destroy the second webview.

webView

The webViewobject provides a way to manage a second webview inside your cordova app. This could be usefull if you want to open a second page as a popup or you want to load new content that is totally unrelated to the main view, but still have the ability to use cordova plugins.

The main difference with inAppBrowser plugin is that cl.kunder.webview plugin can access and use all cordova plguins installed in your app.

Methods

• Show: Opens a new webView
• Close: Close and destroy the webView
• Hide: Same as Close
• SubscribeCallback: Suscribes a callback that is fired when webView is closed

Show

Parameters:

• url: The url to be opened. In Android, if the url does not contain a protocol prefix (*:// or javascript:*), the prefix file:///android_asset/www/ will be automatically added. (String)
• successCallback: Is triggered when the plugin is succesfully called. (Function)
• errorCallback: Is triggered when the plugin fails to be called or is called with error. (Function)
• loading: Should show a loading dialog while webview is loading. (Boolean optional)

SubscribeCallback

Suscribes a callback that is triggered when a webView is closed.

Parameters:

• successCallback: The callback that will be called when a webview is closed. It contains an array of parameteres given by the Close/Hide method called in the child webview. (Function)
• errorCallback: Is triggered when the plugin fails to be called or is called with error. (Function)

Usage

// Main webview
// This will be fired on second webview close
webview.SubscribeCallback(function(params) { console.log(params); }, function(){ console.log('error'); })

Close/Hide

Parameters:

• successCallback: Is triggered when the plugin is succesfully called. (Function)
• errorCallback: Is triggered when the plugin fails to be called or is called with error. (Function)
• params: Parameterers that want to be delivered to the parent webview through the SubscribeCallback method. (Array)

HideLoading

Close the loading shown by Show method.

Parameters:

• successCallback: The callback that will be called when the loading is closed. (Function optional)
• errorCallback: Is triggered when the plugin fails to be called or is called with error. (Function optional)

SubscribeExitCallback (Android only)

Subscribes an exit callback that is triggered when ExitApp method is called.

Parameters:

• successCallback: The callback that will be called when a webview is closed. (Function)
• errorCallback: Is triggered when the plugin fails to be called or is called with error. This can be empty function (Function)

ExitApp (Android)

This method execute the subscribed exit callback if exist. Then close the webview. This method is usefull when onResume event is defined in your main app. You should set a flag in subscribeExitCallback success method. Then in onResume event you should verify the flag value. Finally the main app should call ionic.Platform.exitApp() method to close the app.

ExitApp (iOS)

This method execute objective-C exit(0) method.

SetWebViewBehavior (iOS)

This method adjust the size of the current webview using the iOS 11 status bar space. This method should be called at the beginning of the app. No parameters required.

Other

Cordova Crypt File Plugin compatibility

This plugin is compatible with Cordova Crypt File Plugin. It will detect it automatically and will use decrypted assets files. For more information about Crypt File Plugin, please visit the plugin repo.

cl.kunder.webview's Issues

Android: No multiple webviews

Hi!
In iOS I can create and destroy multiple webviews without problem. But in Android, I can create multiple webviews but only destroy the latest. What I need to change to create/destroy multiple webviews in Android?
Thank you for your plugin!

Communication between webviews

I haven't seen one, but is there a possibility of communication between the webviews?
The inappbrowser plugin has a form of limited communication but this plugin suits me better except the cross-webview communication.

error while installing

I'm trying to install this plugin on my phonegap project
so on cli, I did
$ phonegap plugin add github.com/kunder-lab/cl.kunder.webview.git

But then..
I get the error
Error: Invalid package.json

it refuses installing because of no package.json in the repository!
So I'm writing one myself..

Cordova-second-webview not working

I try to use "cordova-second-webview" plugin to create extra page for new webview by code below:

mainApp.browseWeb = function(address){
if(navigator.connection.type != Connection.NONE){
var browseWebView = new webview();
browseWebView.Show("https://angularjs.org","_blank", function(){alert("WebView Success");}, function(){alert("WebView Failure");}, true);
this.WebViews.push(browseWebView);
alert('The web view is created');
}
else alert('Browse error : No network connection');
}

However, I don't get it work even to open a webview. May I know why and how to fix it?

Further handle when received 401 response

This is a problem regarding webview plugin.
The scenario as below:
If we want to open an URL which need the authorization, server side will return a 401 response.
In this case, the webview be rendered as a blank page rather than alert a dialog to ask user input the authorization information (User ID, password) which just like what the mainstream browser do.

Is there an existing solution to cover this scenario or we have to make the secondary development to handle this case if we use the plugin

Call to Camera plugin from second webview, no response

Hi!
I've found other bug in Android. If you call from 2nd webview to an external action (app pause/resume), like navigator.camera.getPicture(success, fail, options), you'll get this error on resume:
"Got an activity result, but no plugin was registered to receive it."
The app lost thread and can't manage response.
Can you help me to find (and think) where is the bug?
Thank you very much!

Posting parameters

How to post parameters in webview. Like in android we have webview.postUrl(url, postData), do we have something in this plugin?

Can I have a transparent extra webview?

For dialogs, this plugin is excellent, but is there a way to make the background transparent?

<body style="background-color:transparent">
</body>

seems to have no effect.

Accessing Plugins

Hi, I'm trying to use a webview to load an external URL and to let that loaded page/js invoke a plugin.

I can load the page simply enough: webview.Show(URL), and it correctly displays and can load JS and CSS - basically works as expected. I've included in the directory of my HMTL the cordova.js file. This makes the "cordova" varable present and even cordova.exec. But, when I try this:

cordova.exec(null, null, "Vibration", "vibrate", [1000]);

It doesn't produce any errors, but nothing vibrates either. I've tried other plugins as well. All are included in my calling application. I've even included the other files/dirs of a cordova app: cordova_plugins.js, cordova-js-src, & plugins but nothing happens.

Does anyone have a suggestion of what I might be missing? Or an example of where this works?

iOS internal url

Hi! I am trying to open an internal url in a different webview for ios platform. I wrote:

webview.Show("file:///Staging/www/tam.html");

But i got the error:

File not exists.

What i was doing wrong? Thanks for your patient!

Launches in portrait

WebView launches in portrait although device is landscape and it won't rotate. Only tried this on Android. Device Nexus 9.

Edit: same case on iPad too..

I've edited the plugin xml via Android Studio to change the orientation to landscape but each time you build via cordova this defaults back to portrait on android manifest.

Can we make this optional please so we can launch portrait / landscape.

[iOS] Upload Img cancel button is closing web view [bug]

Only on iOS (tested on 9 and 10)

When you adding img into file type input, and click cancel form option dialog it also will close webView.
Instead of going back to place with file type input, it's closing webView.

App won't go into debug mode

Application won't go into debug mode when plugin is installed, removed and worked fine.

the plugin automatically adds the prefix file:///android_asset/www/

when i want to create a new webview with this plugin and call show() function with a URL like https://www.google.com.

the app will show a error alert "network error.(file:///android_asset/www/https://www.google.com)", could you give some advice why the prefix file:///android_asset/www/ will added front of the URL automatically?

save state in multiple webviews

[Android] Any way to open multiple webviews, and save state in everyone, in order to reopen them directly?

Cordova-second-webview not working

I try to use "cordova-second-webview" plugin to create extra page for new webview by code below:

mainApp.browseWeb = function(address){
var browseWebView = new webview();
browseWebView.Show("https://angularjs.org","_blank", function(){alert("WebView Success");}, function(){alert("WebView Failure");}, true);
this.WebViews.push(browseWebView);
alert('The web view is created');
}
else alert('Browse error : No network connection');
}

However, I don't get it work even to open a webview. May I know why and how to fix it?

iOS Issues

1. Webview launches with "Success" but only with a white empty page which then launches Safari.

2. After closing the webview, you cannot open it again.

webview.Show(
    url,
    function onSuccess(){
      console.log('Success');
      app.hideLoading();
    },
    function onError(error){
      console.log('Error opening presentation.');
    }
);

Android can't use cordova plugin

I use this plugin in my ionic3 project,after open second webview can invoke cordova plugin as expected on ios
but android not work。
error：Channel not fired：onCordovaInfoReady

[IOS][Android] how to set width and height to the new webview

as the title show
I want to create another function called for example resize(width, height)
to control the width and the height of the new webview.

How we do this, any idea ????

NPM release

Hi kunder-lab team,

Thanks so much for this plugin! It has become indispensable for our cordova projects.

We're currently consuming the plugin via git directly - would it be possible to publish it to npm? It does add another piece of overhead to the maintenance.. but it would be nice.

Thank you! Feel free to just close this if you disagree.

No response on iOS Simulator?

It is not working on iOS Simulator.
To be more specific, it's working in a bit strange way.

When I trigger
webview.Show(url);

on javascript,

nothing happens.

but then, when a soft-keyboard appearing event happens, (i.e. clicking on the input box to type in something)
the app restarts, then shows the new webview with the URL.

Do you have any idea why?

support for ionic angular 2

any demo to work with ionic 2 , angular 2?

thanks..