Opening External Links in Ionic

1

Goal
I want to link to external websites but retain the ability for users to either go back or close the external page. Adding external links (on iOS) opens the page without any back functionality without any plugins added.

Remediation Steps
I’ve tried a number of different ways of adding Cordova’s InAppBrowser (both using cordova and ionic commands from terminal, both using either the git link or the plugin add org.apache.cordova.inbrowserapp, including edits to the config.xml file for the feature, i.e.

From Terminal
cordova plugin add org.apache.cordova.inbrowserapp

In Config.xml

Asking for Help
Is there a definitive or best practice way to open external links in Ionic?

Sources Already Consulted



2

From what I have understood, ionic works with the device’s browser, whenever you try to open an external link in the app could not return to my app. I occupy appbrowser as plugin and I solve all my problems.

3

Hi @dpeters911 - I’m using the InApp browser plugin and it’s working fine.

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

You can see from the docs that you can configure whether to launch the url in system browser or InAppBrowser, and whether you show or hide buttons and location bar.

I just added the plugin using cordova plugin add org.apache.cordova.inbrowserapp

4

Does anyone have a clear, contemporary example?

I created a fresh project, added Cordova inappbrowser (which is referenced in the materials I’d been looking at), etc. Everything compiles fine for ios and android. However, links in ios (at least) still load in-app rather than the system browser.

I feel like I’m back on training wheels again. Some threads suggest listening for the event, other say not to, some suggest onclick while other ngclick, some say to add controllers and others say that’s not necessary.

The last one I tried said to simply run the following:

<a class="item" href="#" onclick="window.open('http://www.starwars.com/', '_system', 'location=yes'); return false;">Go Somewhere in System Browser</a>

The forums are a mess with different methods (see original post for a few threads) and I can’t get any of them to work.

Very grateful for best practices for handling multiple external urls in the system browser throughout an app. Am I going about this the wrong way?

Thanks,
Embarrassed in Seattle :blush:

5

Woohoo!

So, I got a nasty build error for ios when adding inappbrowser after ios was added as platform. However, I found a new guide.

It runs! It’s alive! For science!

Here’s my process:

  1. create a new ionic app

  2. enter app folder

  3. cordova plugin add org.apache.cordova.inappbrowser

  4. ionic platform add ios

  5. Add this code to any html file in www, per http://www.iperform.nl/en/blog/post/cordova-open-external-link

    For Science, Pinkman

  6. ionic run ios

2 Likes
7

Hi I want to open a pdf link in app browse.

Example : http://www.orimi.com/pdf-test.pdf

I tried all the possible option in window.open like _system, _blank, _self but they all are showing blank screen.

Any help. I would be very thankful.

8

so you got the solution to open pdf files inside the InAppbrowser/

9

I was facing same issue in my Ionic3 application. Then just installed In App Browser Plugin and it then problem solved.
Please check below code after installing plugin and let me know result.

window.open('http://www.orimi.com/pdf-test.pdf', "_system");