CODEWITHSUNDEEP
androidangularjscordovainappbrowser
daniegarcia254
daniegarcia254

Reputation: 1197

InAppBrowser plugin for Cordova/Phonegap -- window.open not opening links in default browser

I'm trying to add the InApBrowser PhoneGap plugin to my web app in order to open the links in the mobile default browser.

The webapp is programmed with AngularJS and IonicFramework.

I know there are very similar questions, but none of the solutions I've tried has worked so far.

So when I create the apk file and run it on my Android phone device some things don't work as expected. By the way, I build the apk file through the https://build.phonegap.com/.

In my index file I have this function:

    <!-- JQuery library -->
    <script src="lib/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).on('click', '.external', function (e) {
            e.preventDefault();
            window.open(e.target.href, '_system');
        });
    </script>

One of my problems is that with this piece of code:

  <p>
    <a id="btn-noticias" class="button button-block button-stable external" 
        ng-href="{{noticia.uri}}">
      Ver noticia en la web
    </a>
  </p>

the link is opened in the appview, not in the default browser.

And in this piece of code:

            <a class="item lista-item examen external" ng-repeat="examen in filteredExSept"
               ng-href="{{examen.URI}}"
               ng-hide="errorConexionExSept || examenesSeptiembre.length==0 || filteredExSept.length==0">
                <div class="tituloExamen" ng-bind-html="examen.asignatura"></div>
            </a>

the app doesn't even open the link, not in the browser, no in the appview...just doesn't open the link.

Here you can see may config.xml file:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<widget id="com.ionicframework.myapp377389" 
        version="0.0.1" 
        xmlns="http://www.w3.org/ns/widgets" 
        xmlns:cdv="http://cordova.apache.org/ns/1.0"
        xmlns:gap="http://phonegap.com/ns/1.0">

    <name>SmartCULM</name>

    <description>
        An application...
    </description>

    <author email="[email protected]">
      Daniel García Páez
    </author>

    <content src="index.html"/>
    <access origin="*"/>

    <!--
        If you do not want any permissions to be added to your app, add the
        following tag to your config.xml; you will still have the INTERNET
        permission on your app, which PhoneGap requires.
    -->
    <preference name="permissions"                value="none"/>

     <!-- Core plugins -->
    <gap:plugin name="org.apache.cordova.inappbrowser" />
    <gap:plugin name="org.apache.cordova.device" />

    <!-- Define app icon for each platform. -->
    <icon src="img/apk_icon.png" />
</widget>

So, anyone knows if I'm doing something wrong? Either with the InAppBrowser plugin or with the angularjs code?

You can access to my whole project here.

UPDATE I've found the next information in the PhoneGap documentation for the access tag (also known as whitelist) in the config.xml:

on Android, if a domain is whitelisted, a link will take over the entire webview. If it is not, it will open in the browser.

So, as I understand it, if I want to open in the default browser all my links (http://culm.unizar.es/* & https://culm.unizar.es/*) I have to avoid including them in the whitelist. ¿How I do that? I'm a little confused...I've tried but not sure if doing it ok.

Upvotes: 3

Views: 2974

Answers (2)

tatiana_c
tatiana_c

Reputation: 958

In config.xml:

<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />

Please update if it worked< I have the same issue with android

Upvotes: 1

mharr
mharr

Reputation: 604

This is the code I use, as compiled from several sources here: 

    var externalLinkToOpen = $(this).attr("href");
    if (app.isPhoneGap()) {
        if (device.platform === 'Android') {
            navigator.app.loadUrl(externalLinkToOpen, { openExternal: true });
        } else {
            window.open(externalLinkToOpen, '_system');
        }
    } else {
        window.open(externalLinkToOpen, "_blank");
    }

The "app.isPhoneGap" just checks if device == undefined to see if running as website (almost all my apps I build as a website). And, yes, I have the InApp browser plugin in the project also.

Upvotes: 2

Related Questions