Phonegap Build CLI-5.2.0 Download and Close From Within Web App

Question

I've been wrestling with making calls to window open, using inappbrowser from within my app. Basically, I'm using phonegap as a wrapper to load up a mobile skinned CMS site with special app features.

Here is the index.html. I'm using inappbrowser (with location set to no).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Emerald Test App</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width" /> 
    <script src="phonegap.js"></script>

    <script type='text/javascript'>
      var ref = null;
      function onLoad() {
       document.addEventListener("deviceready", onDeviceReady, false);
      }


     function onDeviceReady() {

      var url = 'https://my-cms-site.com/content.aspx?page_id=31&org_id=1&app=1';
      var target = '_blank';
      var options = "location=no"
      ref = cordova.InAppBrowser.open(url, target, options);

     }

</script>
</head>


<body onload="onLoad()">
</body>
</html>

What I'm looking to do, is open links in a system browser - from my external site loaded through inappbrowser

I've tried downloading files using similar documentation and suggestions from posts like

<script type="text/javascript">
        window.open(url, '_system');
</script>

And _blank, and adding 'location=no' etc, but no dice. These are external pages, loaded from my remote site.

When these links are clicked, they open in the same browser (inappbrowser or webview) and take over the browser. What I'm looking to do is open these up in another system browser (chrome, safari, whatever). This would take care of my download issue (as the files will hopefully open up in the system browser and the user can figure out what to do with them).

I've tried to add an event listener, and executescript to return a value of the href. Then use that value to window.open(href,'_system'); from the index.html (instead of the remote page). Because on the index, I will still have the reference to inappbrowser.

   ref.addEventListener( "loadstop", function() {
   ref.executeScript(
        { code: "var gbal = null; $('a').on('click', function() { gbal = $(this).attr('href'); }); (function runIt() { return gbal })();" },
        function( values ) {
            if (values != null) {
            //alert( values[ 0 ] );
             window.open(values[0],'_system');
            }

        }
          );
       });
   }

The values[0] is always null. Which seems to indicate I'm not doing something correctly in the code: portion of executescript - or $(this) is not really this

So, big question - how can I open links in my external site in a system browser. window.open('whatever.htm', '_XXXXX') makes no difference when called on my remote site. Am I on the right track by using an event listener?

apoji187 apoji187 · Accepted Answer · 2016-09-22T15:10:40

Answering my own question here so anyone facing a similar situation can get a solid answer. I've pieced this together from other posts, references and documentation.

So you want to open up a link to an external browser, in a remote loaded site in InAppBrowser?

On your remote site, you will need to include a script src to your cordova.js file, your cordova_plugins.js file, and include your plugins folder. These files must be hosted on your remote site. I am choosing to load mine conditionally if I know it's the "app". The cordova files when loaded will throw a series of alerts, so you won't want to load these unless you know it's the app.

Where do you get these files? I installed Phonegap Desktop and used the files from the build, but had some reference errors. I instead used Phonegap Build, and extracted the files from the APK. Renamed the appname.apk to appname.apk.zip and extracted/copied the needed js files to my server. *There are some issues with platform differences, and the cordova.js file will need to be altered and conditionally loaded for iOS/Android.

These are necessary so you have handles to the inappbrowser (and in the case of my "close the app" requirement - navigator).

On my remote (external) site (after I have loaded the cordova/plugins) I can now close the app with a simple call to navigator.app.exitApp();

In the pages of my remote (external) site loaded in inappbrowser, I can now open links in external pages by doing something like this:

<a onclick="loadUrl('http://google.com'); return false;" href="#">Test link, don't click</a>

<script type="text/javascript">
$('.closeapp').click(function() {
navigator.app.exitApp(); //this only works on Android. iOS doesn't allow for programmatic exit
});
function loadUrl(url){
    navigator.app.loadUrl(url, { openExternal:true });
    return false;
}
</script>

I plan on modifying the loadURL function somewhat using jquery, to be handled on click and look for a class. Something like:

$('.downloadable').click(function() {
var url = $(this).attr('href');
navigator.app.loadUrl(url, { openExternal:true });
});

The above only works for Android. Trying a vanilla window.open('http://www.whatever.com', '_system') doesn't open an external browser in iOS from my external site. I thought about using another ref = cordova.inappbrowser.open() from inside my external site? That doesn't work. Anyone have any ideas?

Phonegap Build CLI-5.2.0 Download and Close From Within Web App

1 Answers