InAppBrowser's window.open() Crashes My App

ionic-v1
1

Hi guys,
may someone help me please.

I am trying to open a link in the InAppBrowser by a click event as folllows:

controllers.js

// Open InAppBrowser
  $scope.startsite = function() {              
var ref = window.open('http://mysite.com', '_blank', 'location=yes');
  };

templates/menu.html

   <button class="button button-outline button-light" ng-click="startsite()">
      Let's Go!
    </button>

When I test in browser using ionic serve, it works and a pop up is opened, but after building the app, clicking the button crashes the app and says the app stopped.

I know I should be including onDeviceReady but I do not know how to include it here.

Someone Help

2

Hey @briannyagol!

Did you know that there is a great community project called ngCordova? This ng module provides you an easy way to deal with cordova plugins. There is also the plugin for the InAppBrowser supporter.

install ngCordova over bower: bower install ngCordova
require it and use the $cordovaInAppBrowser service.

In This code i also used the $cordovaNetwork to only open IAB if you have internet connection.

Ceck out folllowing:

$scope.iabDefaultSettings         :  {
              location        : 'no',
              clearcache    : 'no',
              toolbar        : 'no'
            }


$scope.openIAB = function(path) {
        
            $ionicPlatform.ready(function() {
                //if offline
                if($cordovaNetwork.isOffline()) {
                    console.log('you have no internet connection!'); 
                    return;
                }

                //open iab with beacon content url
                $cordovaInAppBrowser
                    .open(path, '_blank', $scope.iabDefaultSettings)
                    .then(
                        // success    
                        function(event) {
                            
                        }, 
                        // error
                        function(event) {
                            
                        });
                 });
        }

Hope it helps!

3

Hi @BioPhoton I am still getting the same error when i try opening a link using the IAB . Works on my localhost test browser but not in the app. Do you think there is a reason why?

4

He @briannyagol! Sry for the lazy response!

Did you installed the iab plugin?
Chech your installed plugins over the cli:
cordova plugin list

Also try to remove and reinstall it.

Let me know if this fixed the issie

5

Hi @BioPhoton its okay. I think I am having some typos here and there. may I ask, is it correct to define two config options in angular.module like .config(function(){}).config(function(){});? or is it right to use the two functions as arguments like .config(function(){},function(){});

6

Hi briannyagol,

Do you still have issues opening a url in the InAppBrowser by a click event/button?
If so; please follow these steps 3 simple steps. (I have tested this on an Android device)

Step 1: Installing and set the inappbrowser plugin.

1.1
Open your cmd in your apps main folder and run this ==>
cordova plugin add org.apache.cordova.inappbrowser
(There are some rumors that the latest version of the inappbrowser(v0.5.4) plugin has some issues, so please if it still doesn’t work with this version uninstall and downgrade for older version
(v0.2.4). See this link for performing this task.

1.2
If you have done this correctly, the inappbrowser folder will appear in your apps folders under the following path ==> projectname/plugins/org.apache.cordova.inappbrowser

1.3
Now please declare your inappbrowser in the initialization of your app. (In weird cases this step is not necessary)
Search/Find in you projects folder for onDeviceReady. In my project this is located in the index.js file.
To initialize the inappbrowser please insert the following line of code in the onDeviceReady function.
window.open = cordova.InAppBrowser.open;

onDeviceReady: function() {
app.receivedEvent(‘deviceready’);
window.open = cordova.InAppBrowser.open;
},

Step 2: The button that is linked (calls) to your function in the html file:

<button style="float: right;" ng-click="OpenUrl()">Google</button>

Step 3: The function in your Controller that is called when pressing the button:

$scope.OpenUrl= function () {
window.open(‘http://google.com’,‘_system’,‘location=yes’);
};

I hope this helps your issue, I recommend reading this page for better understanding on how does the inappbrowser plugin works.

Let us know if it works :smile:

7

Hi @nlombardi1 thanks for your input. It has given me another way to walk around the implementation. At this time, I am struggling with image upload and I cant find an all inclusive hint code to do so…