Inappbrowser options not working

cordova
1

Hi guys,

I’ve been trying to load external content on my ionic app but can’t seem to make it work properly using the ng-cordova inappbrowser.
I’ve set some of the options but they doesn’t seem to affect anything when I test.

Where’s the code

$ionicPlatform.ready(function () {
            
            var options = {
                location: 'no',
                clearcache: 'yes',
                toolbar: 'no'
            };
            
            
            //message, subject, file, link
             $cordovaInAppBrowser.open(url, '_blank', options)
                  .then(function(event) {
                    // success
                  })
                  .catch(function(event) {
                    // error
                });
        });

Don’t know what am I doing wrong …

Thanks in advance

2

options is not an object – it’s a comma separated list:

                refresher = window.open(
                    REFRESH_URL,
                    '_blank',
                    'hidden=yes,location=no'
                );
3

That’s for the cordova plugin. I’m using the ng-cordova which states in the docs as an object

http://ngcordova.com/docs/plugins/inAppBrowser/

The object to string parsing is made by the directive… Oddly enough they don’t seem to work as I try to set up the location to off but I can still see it when I open the app.

4

Oops. I completely missed that part :smile: It looks right to me – maybe dig into the ngCordova js and add some console.log()s.

5

Just want to make sure, you did install the native plugin as well, correct?

6

I ran into this issue last week… turns out that because window.open works somewhat without the plugin (on Android at least, where I was testing), I thought I had already installed the plugin but that it was broken. I spent a long time trying to figure out why the options weren’t working… :slight_smile:

7

@mhartington I installed with the command on the ng-cordova page.

I have this on my plugin list:
org.apache.cordova.inappbrowser 0.5.4 “InAppBrowser”

I assume I have everything … I’m trying to define the default options on the config of the module like in the example (just trying everything imaginary and possible)

Don’t have any console logs when running on emulator or device with Xcode (Haven’t tested on Android)

8

Hi @mhartington , @dpfavand,

+1 I’m not able to set return back or done button on ngCordova InappBrowser default options. Could you please help to set back buttons on InAppBrowser?

9

I was just able to do it with this code

.controller("MainCtrl", function($scope, $ionicPlatform, $cordovaInAppBrowser) {
  $ionicPlatform.ready(function() {


    var options = {
      location: 'yes',
      clearcache: 'yes',
      toolbar: 'yes',
      closebuttoncaption: 'DONE?'
    };


    $scope.openlink = function() {
      $cordovaInAppBrowser.open('http://ngcordova.com', '_blank', options)
        .then(function(event) {
          // success
        })
        .catch(function(event) {
          // error
        });
    }

  })
})

Note, it is an ios only option.

2 Likes
10

Thank you. I had been trying it on Android. Is there some way to enable back button on Android?

11

If the native plugin doesn’t support it, then there isn’t

12

So was it just that you didn’t have the plugin installed? I think I am having the same issue, but definitely have it installed, and I can’t resolve it.

13

Instead of Done button you can make the close button appear when location is set to yes for Android since the close button is part of the location bar.

<button class="button button-outline" onclick="window.open('https://www.google.com/', '_blank', 'location=yes'); return false;">

14

I’ve been struggling with this issue a lot and it has been giving me a lot of headaches for the past few days.

Basically, the toolbar/navbar of ngCordova InAppBrowser doesn’t show. This is fatal because without it, I can’t close the InAppBrowser.

I’ve apply solutions from this topic but nothing works.

What I’ve done:

  • I have installed ngCordova InApp browser via cordova plugin add org.apache.cordova.inappbrowser
  • I have attached above
  • I have include ngCordova module in app.js
  • I have inject $cordovaInAppBrowser in the controller
  • I have follow API from http://ngcordova.com/docs/plugins/inAppBrowser/

What happens when I upload the project to Ionic View, the InAppBrowser runs but it takes over the entire screen and the toolbar/navbar doesn’t show.

Please help. Thank you!

15

marcelc, I have the exactly the same problem. Location and toolbar with back button doesn’t shows on my iPhone 6 in Ionic View app, so I can’t go back to my app from external site view. But if I run on emulator (ionic emulate ios) — then I see both back button and location bar.image
I wonder what we do wrong and why in Ionic View Done button doesn’t shows.

Here is this issue on github: https://github.com/driftyco/ionic-view-issues/issues/105

16

Since you say the inappbrowser only doesn’t work on ionic view but works when installed on device, I’ve a suspicion that inappbrowser doesn’t work on ionic view because ionic view is already utilizing it to show our app? That’s why cordova take over the entire ionic view instead when we’re triggering the inappbrowser. Another thing that makes me think this way is because most of other cordova plugins that ionic view is already using doesn’t work such as the status bar plugin.

This is only my suspicion though and I’ve yet to find a solid prove to based this on. Meanwhile I’ll keep on searching for a solution.

1 Like
17

##@marcelc is correct!

####On the emulation (ios), the inAppBrowser uses the device’s native browser, you can get the ‘done’ button by adding “closebuttoncaption: ‘done’” to the options of the .open() method.

####So if you’re in ionic-view, it’s going to open a new browser by you default system browser, which should be chrome of firefox on your desktop.

####One caveat is that this is the functionality for opening links using the .open() method on inAppBrowser. If you use an anchor tag to open links, I haven’t been able to get the done button with using that, but it will open as you expect in ionic view.

18

@marcelc is correct! On the emulation (ios), the inAppBrowser uses the device’s native browser,you can get the ‘done’ button by adding “closebuttoncaption: ‘done’” to the options of the .open() method.

So if you’re in ionic-view, it’s going to open a new browser by you default system browser, which should be chrome of firefox on your desktop.

One caveat is that this is the functionality for opening links using the .open() method on inAppBrowser. If you use an anchor tag to open links I haven’t been able to get the done button with using that.

Make sure that links are https if they’re supposed to be, especially in dealing with API data, the desktop browser will automatically resolve them but the emulator browser won’t

20

I am sure this works but I get an error ( expected and identifier and instead saw ‘.’) at line one and the app screen is white… I added the code at the bottom of app.js

21

I tried to open a link in the system browser, it worked just fine. Would there be any way to hide the browser back and forward buttons, the whole bar in fact? I tried to do location=no, toolbar=no didn’t seem to work