Open Links outside the App

mobile
1

Hi there!

I’m finishing a mobile App using meteor, it will be available for Android and iOS. I’m wondering how can I force some links to be opened outside the App.

I didn’t find any clue on this. I’ve tried with target=" _system" and target=" _blank" but it doesn’t work. What I’m looking for is pretty easy, I just want the following link to open in the external web browser.

<a href="http://www.twitter.com/user123">Twitter</a>
4 Likes
2

Try using target = “_blank”

3

Make sure you allow access to the external domains in your mobile-config.js file: http://docs.meteor.com/#/full/App-accessRule.

This allows all external access:

App.accessRule('http://*');
App.accessRule('https://*');

Also make sure you have the inappbrowser package installed:

meteor add cordova:org.apache.cordova.inappbrowser@0.5.4

Read the documentation about this here: https://github.com/apache/cordova-plugin-inappbrowser

2 Likes
4

Whats the point installing the “in app browser” ? I want to open the links in the external browser.

5

Try using target = “_blank”

Already did, but it doesn’t work…

6

Oh, maybe target="_blank" will work for that!

7

It doesn’t work… I don’t understand why this is so difficult :S

1 Like
8

You can pass an additional argument to App.accessRule

Options
launchExternal Boolean
Set to true if the matching URL should be handled externally (e.g. phone app or email client on Android).

But this would mean whitelisting every URL you want to open externally.

1 Like
9

I’ve been trying to make it work with this, even when it doesn’t look like the best option, but it doesn’t make anything. The app simply doesn’t open the links…

1 Like
10
3 Likes
11

Finally it worked!

 meteor add cordova:org.apache.cordova.inappbrowser@0.5.4


<a href="#" onclick="window.open('http://www.facebook.com', '_system');">www.facebook.com</a>
8 Likes
12

Man, the amount of time I spent on finding a way to get this to work. Glad you did. Why is this so not-obvious?

2 Likes
13

It’s was a bit messy to find the answer…

14

I’m using this solution which works across the app on all relevant links.

Add org.apache.cordova.inappbrowser@0.5.4.

Add this code:

cordova.coffee:

Meteor.startup ->
  return unless Meteor.isCordova
  platform = device.platform.toLowerCase()

  # Handle click events for all external URLs
  $(document).on 'deviceready', ->
    $(document).on 'click', (e) ->
      $link = $(e.target).closest('a[href]')
      return unless $link.length > 0
      url = $link.attr('href')
      return unless Paths.isUrl(url)
      switch platform
        when 'ios'
          window.open url, '_system'
        when 'android'
          navigator.app.loadUrl url, {openExternal: true}
      e.preventDefault()
6 Likes
15

Thanks @aramk . works well

16

thanks for sharing! @aramk

17

@aramk Thanks your solution was good except for that I do not have Paths defined. What is Paths? A validation library you added. Can you give info about it? Instead of paths I am using regex to test for url like so:

isUrl = (s) ->
regexp = /(ftp|http|https)://(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(/|/([\w#!:.?+=&%@!-/]))?/
regexp.test(s)

Not sure if this is best, let me know

1 Like
18

When I try to run meteor run android-device with this particular version of InAppBrowser (default appears to be 1.0), I get the following exception:

   While running Cordova app for platform Android with options --device:
   Error: Command failed:
   /dev/hub/.meteor/local/cordova-build/platforms/android/cordova/run
   --device
   Note: Some input files use or override a deprecated API.
   Note: Recompile with -Xlint:deprecation for details.

   /devhub/.meteor/local/cordova-build/platforms/android/src/org/apache/cordova/inappbrowser/InAppBrowser.java:120:
   error: cannot find symbol
   || Config.isUrlWhiteListed(url)) {
   ^
   symbol:   method isUrlWhiteListed(String)
   location: class Config
   Note: Some input files use or override a deprecated API.
   Note: Recompile with -Xlint:deprecation for details.
   Note: Some input files use unchecked or unsafe operations.
   Note: Recompile with -Xlint:unchecked for details.
   1 error

   FAILURE: Build failed with an exception.

   * What went wrong:
   Execution failed for task ':compileDebugJava'.
   > Compilation failed; see the compiler error output for details.

   * Try:
   Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get
   more log output.

Any ideas?

19

Looks like if you use Version 1.0.1 (latest), this resolves the issue.

20

This is a prime target to become a neat little Atmosphere package… any offers? :smile:

Am I right in thinking that Hot Code Push wouldn’t work for this change, because it’s needing a new cordova package?