External Links (facebook/twitter) to load OUTSIDE of app?

ionic-v1
1

In my app, I of course have a link to facebook and twitter. However what happens is that these links are opened within my app, and not loaded externally.

This is fine for the mobile website version, but natively as an app this is not desirable. How do I go about loading external web resources externally when installed as an app?

2

Are you using phonegap 3.x? You’ll want to install the InAppBrowser plugin, and add target="_system" to your links that you want opened externally. (or use $window.open(‘url’, ‘_system’) if you’re doing it programmatically)

3

Using Cordova 3.3.0 (does cordova == phonegap?).

Installed inappbrowser plugin via cordova. Added _system to target and it doesn’t work.

From what I read it should just work on a regular <a href="blah" target="_blank">, but then it goes to say a bunch of other shit that you need to do to get it working after it says you don’t need to do anything extra.

shrug

4

What I always do and works for me is to use the window.open method for handling external links.

window.open('http://apache.org', '_blank', 'location=yes');

This will open a page in the innapbrowser to where ever there url points to.

5

Yeah some of the documentation I’ve found is contradictory.

First of all: http://phonegap.com/2012/03/19/phonegap-cordova-and-what’s-in-a-name/

Secondly
(Using the InAppBrowser plugin) I created this directive to handle my “open up in the browser and not in my app” links:

.directive('browseTo', function ($ionicGesture) {
 return {
  restrict: 'A',
  link: function ($scope, $element, $attrs) {
   var handleTap = function (e) {
    // todo: capture Google Analytics here
    var inAppBrowser = window.open(encodeURI($attrs.browseTo), '_system');
   };
   var tapGesture = $ionicGesture.on('tap', handleTap, $element);
   $scope.$on('$destroy', function () {
    // Clean up - unbind drag gesture handler
    $ionicGesture.off(tapGesture, 'tap', handleTap);
   });
  }
 }
});

Usage:
<button browse-to="https://www.google.com">Open Google</button>

Hope it helps!

11 Likes
6

To add plugin: cordova plugin add http://git.apache.org/cordova-plugin-inappbrowser.git

1 Like
7

This is great, thanks @gregorypratt !

Having a little trouble still, because ng-bind-html filters out the browse-to in it’s output. Do you know how to make sure ng-bind-html doesn’t sanitize this property from its output?

1 Like
8

Just to add to the conversation, I solved this problem (with the help of all of you in this forum) a few days ago.

I blogged my methods. Take a look if you like.

9

I just do this and it works:

<a href="#" onClick="window.open('https://twitter.com/elepago','_blank','location=yes');return false;"> Twitter @Elepago</a>

This basically opens a modal-type browser over your app in iOS. Simply click the ‘Done’ on the bottom left to return to your app.

1 Like
10

I run into the issue of “Uncaught ReferenceError: cordova is not defined”, source: http://… etc…

I have tried:

  • onclick="window.open(‘http://www.google.com’,’_blank’,‘location=yes’
  • onclick="window.open(‘http://www.google.com’,’_system’,‘location=yes’
  • and a host of other “solutions” I’ve searched out. Any thoughts?

My config.xml file has:

<feature name="InAppBrowser">
    	<param name="android-package" value="org.apache.cordova.InAppBrowser" />
	</feature>
11

Have you also actually added the plugin to your project by doing cordova plugins add org.apache.cordova.inappbrowser from the command line?

12

I am trying to login the user by social login on my site I achieved this by your answer. But the problem is that i cant close the window once the user is successfully logedin. I tried to render javascript window.close() but its not working. Can you help me out.

13

Are you on ios or android? There should be a button label “Done” at the bottom for ios

14

i am on android i have made a post at Opening external link and closing it at an event

15

@ftorre104 Easiest solution by far. I wrote a filter to convert links to this just in case anyone was needing to parse text that they may have gotten from an external source. It requires ngSanitize, though you can take out those sections if you trust the html.

myApp.filter('hrefToJS', function ($sce, $sanitize) {
    return function (text) {
        var regex = /href="([\S]+)"/g;
        var newString = $sanitize(text).replace(regex, "onClick=\"window.open('$1', '_blank', 'location=yes')\"");
        return $sce.trustAsHtml(newString);
    }
});

jsfiddle in action:
http://jsfiddle.net/sxcjmoj5/3/

gist:

3 Likes
16

Hi everyone,

I tried this solution but I got an issue.
My first parameter in window.open should be like : {{store.twitter}} (for example).
But this doesn’t work because it’s recognise as a string.

Does anyone have a solution ?

17

You can use something like <a href="{{store.twitter}}" onclick="window.open(this.href, '_blank', 'location=yes');return false;">Twitter</a> href will be parsed by AngularJS.

18

worked perfectly for me ! thanks!

19

Hi All,

I’ve found the definitive way to bypass inAppBrowser (and Crosswalk browser too)

$ cordova plugin add com.lampa.startapp

Then copy/paste in your index.html this code below

<p>
<a href="#" class="button" 
onclick='navigator.startApp.start([["action", "VIEW"], ["https://github.com/lampaa"]]);'  
ontouchstart="window.plugins.deviceFeedback.haptic()" >Open URL in system browser</a>  
</p>

then “cordova run android” (or cordova build)

and you can see how it open your system browser, like chrome/firefox/opera.

enjoy
MaX

1 Like
20

Thank you ! it worked just fine for me ! =)