Opening external URLs / file downloads into system browser instead of app

ionic-v1
1

Hi all,

after some googling and research on these forum I’m still stuck on a seemingly simple problem. I need to render a couple buttons inside a view, one of which will link to a file download (zip or pdf), and the other to an external website URL.

The desired behaviour would be for both to open inside the system default browser, leaving the app (but saving its current state for the user to come back afterwards).

I’ve started from scratch from the tabs template and added some hrefs in the friend details page (with file names and URLs added to the friend sample data in services.json). This code works when run on a browser with ionic serve, but running it on ios emulator or android device won’t work: the file download button seems to do nothing at all, while the website button opens the URL inside the app’s webview.

Here’s a github with the current code: https://github.com/vemp/ionic_exturl/

How can I get the desired behaviour (and most of all, is that how it should behave? I’ve got more than a doubt about it being a good practice)?

Thanks in advance!

2

What you should look into in the cordova inappbrowser.

http://plugins.cordova.io/#/package/org.apache.cordova.inappbrowser

3

Thanks, I installed the plugin and now I’m able to open external URLs correctly.

However I’m still unable to get a file download working, when I try the same code with a URL pointing to a .zip or .pdf file the inappbrowser window opens but with no content or any reaction at all.

This is what I tried (both in the simulator for ios and a real Nexus4 device for android):

  	<button class="button button-block button-positive" on-tap="extfile();">Download file</button>
<button class="button button-block button-energized" on-tap="exturl();">Visit site</button>

And in the controller for that view I have

      $scope.exturl = function() {
  	console.log("TAP!");
  	var url = $scope.friend.website;
  	console.log(url);
  	var ref = window.open(url, '_blank', 'location=no');
  };

  $scope.extfile = function() {
  	var f = $scope.friend.file;
  	console.log(f);
  	var ref = window.open(f, '_blank', 'location=no');
  };

both $scope.friend.website and $scope.friend.file point to valid URLs (the first to google.com, the second to a .pdf on my server).

For the file downloads, I’d just need to have the file saved to the device as if downloaded from the system browser.

Thanks for helping!

4

Hm, I know iOS will display a save to ibooks. Not sure how Android does it. But I’m not too sure if it is possible to download a file to a device is possible.

5

Thanks for the reply.

Do you know if the fact that this code is not working on the ios simulator is perchance related to the simulator itself? I still have no subscription to test the code on a real ios device, will get one in the next few weeks.

I feel however that the “download the PDF” thing is not a good way of solving the issue, as we can’t be sure that the user’s device has a way to display pdf files (especially on android, ios has ibooks as you noted). Am I right?

Also, a seemingly related third question: how does this change in regards to map links? i.e. assigning coords to a button in the app and having it open the default map application with that location pinpointed.

6

You can use Cordova’s file-transfer plugin to download files.

With this plugin you can save files on the device. You can use then the in-app-browser plugin to open the file with default app.

window.open(file.nativeURL,"_system","location=yes,enableViewportScale=yes,hidden=no");

Alternatively you can try the Document Handler plugin

This plugin downloads the file and open it with the default app on the device. If there is no app then it throws an error which can be handled in a callback to take the appropriate action.

This plugin has some issues with file names and also this downloads the files as temp files so they won’t be saved permanently and not accessible outside application.

1 Like
7

Have you tried using _system instead of _blank? _blank uses the InAppBrowser and _system will push out to the OS default.

8

Using inAppBrowser. It works on iOS but not working on Nexus 7 Android 4.2

Any ideas?

9

I’m using this code, and it’s work.
Use $window instead of $scope .
Try:
Put in your controller:

$window.OpenLink = function(link) {
		window.open( link, '_system');
	};

in your template:

<button onclick="OpenLink('http://example.com/example.zip')">Download</button>

use onclick instead of ng-click.

1 Like
10

Hi guys,

I’m bumping this thread just to say that I’ve made a simple module for angular that makes it easy to open external urls from an ionic app.

Just don’t forget to install the inappbrowser and appavailability plugins! :smile:

11

I think the use of inappbrowser plugin requires wrapping urls in a function call. But, i have page content on my app which comes from a website and contains HTML; which may contain A tags. Does this mean i have to parse all the HTML and replace A tags with onclick events which call a window.open()? That would seem like far more effort than should be required. Is there no way that app can just understand what an A tag is?

12

Sorry if I up this topic, but i kinda have the same issue. I installed the plugin but still can’t make the link work. I tap on it but the browser doesn’t open. my code is almost this:

<strong>Web:</strong> <a href="http://{{web}}">{{web}}</a>

where {{web}} is the address in the services.js file.
Little add: I have added the url sanitization to make maps work; in my app.js file there is this function:

.config([
  '$compileprovider', function( $compileprovider ){
     $compileprovider.aHrefSanitizationWhitelist(/^\s*(#?|http|geo|maps)/);
}])

Can anyone help me?

EDIT: I got the opening of the web browser, but it brings me on http://{{web}} and not on the value i got on the services.js file. :S

13

You might wanna try ng-href instead of href in order for angular to bind the value of {{web}}. Cheers.

14

Thanks for that solution :slight_smile:

15

Did you achieved this in Ionic 1 or 2?? I’m trying to implement the same routing for Ionic 2+. Can you show some code if you achieved to do so??