Cordova InAppBrowser Top Margin

Question

i'm trying to customize the Cordova InAppBrowser to add a top margin in the webView.

I would like to use the in app browser but showing at the top of the screen a 50px navigation bar with a back button to close the InAppBrowser.

Currently working with the iOS version, i'm trying to change the origin of the view to y = 50, but it's not working.

CGRect theFrame = self.inAppBrowserViewController.view.frame; theFrame.origin.y = 50; theFrame.size.height = theFrame.size.height - 50; self.inAppBrowserViewController.view.frame = theFrame;

It always leave me free space at the bottom of the view.

Answer 1

I found out Cordova-OverAppBrowser is doing the job quite well, at least for Android https://github.com/etabard/Cordova-OverAppBrowser (OSX is supported, but I did not tested it, yet).

You can create a new browser and specify X, Y, width and height. Last parameter is a fade in animation:

var oab = new OverAppBrowser($stateParams.input, 0, 50, 400, 400, true);

If you are using ionic, make sure to close the browser window when leaving the view:

$scope.$on('$ionicView.leave', function() {
    oab.close();
});

Fetching it directly from github was the only working solution for me:

cordova plugin add https://github.com/etabard/Cordova-OverAppBrowser

Answer 2

you should set toolbar=yes when opening window and get what you need

window.open(url, _blank, 'toolbar=yes');