3

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.

Ercole
  • 31
  • 1
  • 4
  • There's [a ticket open for that](https://issues.apache.org/jira/browse/CB-3397) but it seems it's not a big prio for Cordova core team (however it seems a number of people would like to have the feature, exactly in order to display the header/footer) – jakub.g May 18 '16 at 09:51
  • Related: http://stackoverflow.com/q/28433766/245966 – jakub.g May 18 '16 at 10:10

3 Answers3

3

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
paul
  • 488
  • 5
  • 16
1

See rePositionViews

- (void) rePositionViews {
    if ([_browserOptions.toolbarposition isEqualToString:kInAppBrowserToolbarBarPositionTop]) {
        [self.webView setFrame:CGRectMake(self.webView.frame.origin.x, TOOLBAR_HEIGHT, self.webView.frame.size.width, self.webView.frame.size.height)];
        [self.toolbar setFrame:CGRectMake(self.toolbar.frame.origin.x, [self getStatusBarOffset], self.toolbar.frame.size.width, self.toolbar.frame.size.height)];
    }
}

This method gets called following createViews to reset positions. This is where your changes got reset. Notice the line

[self.toolbar setFrame:CGRectMake(self.toolbar.frame.origin.x, [self getStatusBarOffset], self.toolbar.frame.size.width, self.toolbar.frame.size.height)];

You see that it's actually adding a top margin to address iOS 7's status bar height. Take advantage of that and offset it a bit more.

initialxy
  • 1,193
  • 8
  • 17
0

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

window.open(url, _blank, 'toolbar=yes');
Chepaki
  • 16
  • 3
  • This is just opening the InAppBrowser fullscreen as usual, with the toolbar. But i would like to add a top margin to show the original view of my application. – Ercole May 28 '14 at 16:07