Does InAppBrowser work with Ionic?


#1

I have a few external links I want to show within my app using InAppBrowser. I am pulling the links from a JSON array so I am using the {{}} inside my onclick reference like this

onclick="window.open('{{presentation.url}}', '_blank', 'location=yes'); return false;"

From my array

.factory('Presentations', function () {
        // Might use a resource here that returns a JSON array

        var presentations = [
            {
                "id": 0,
                "name": "NAHU PPACA Certification Program",
                "url": "https://uba-videos.s3.amazonaws.com/uba-app/presentations/2014FallMeetingorientation_bwo.pdf"
            },
            {
                "id": 1,
                "name": "Business Meeting",
                "url": "#"
            }
        ];

However, when I test on a browser, I get a new window to pop up stating “Cannot GET /%7B%7Bpresentation.url%7D%7D”. The url from my array must not be getting called because when I inspect the code, {{presentation.url}} is there and not the actual url.

I have tried using ng-click, which seems to pull the url correctly, but the link doesn’t seem to respond. Any ideas on how to fix this? Does InAppBrowser work with Ionic and AngularJS or do I need to go to native code?


Is it possible to use Ionic to make an app that has a page that opens a website to a particular page and still contain a toolbar?
#2

If it helps, I have a repo here

Thanks in advanced!


#3

InAppBrowser will only work once you run the app on a device, since it’s a cordova plugin.

To make things easier for working with cordvoa and angular, check out ng-cordova


#4

Thanks for the resources! Should be a great cheat sheet :slight_smile:

I just tested on my device…the plugin works but doesn’t display my PDF. All I get is a loading bar.


#5

Are you trying with android?
Android doesn’t have a pdf viewer in their inappbrowser AFAIK


#6

No, I’m using an iPhone.


#7

Can you post some code?


#8

Hey, does InAppBrowser work on all devices. The other day on an HTC the app felt just stagnant.


#9

I have my onclick inside an ion-item with an ng-repeat like this:

<ion-list>
            <ion-item ng-repeat="presentation in presentations" onclick="window.open('{{presentation.url}}' , '_blank', 'location=yes'); return false;">
            {{presentation.name}}
              </ion-item>
        </ion-list>

I posted my array on my first post.

I found this tutorial that might help me. Could this work or would I be duplicating code already in my ionic.bundle.js code?


#10

Try changing onclick to ng-click, so that way angular is handling things


#11

I have already tried that…unfortunately the plugin doesn’t respond.

The url is getting pulled correctly in the source code when I test on a browser so it looks like we’re heading in the right direction. Maybe ui-sref is the way to go…


#12

OK, I got ng-click to respond by adding this function inside my controller

$scope.openUrl = function() {
            var ref = $window.open('{{presentation.url}}', '_blank', 'location=yes');
        };

Then calling the openUrl function with ng-click. Still not getting the PDF to show.


#13

So I made a work-around by changing {{presentation.url}} into a static URL with links to each PDF I want to display. It’s probably not the best way to go about it, but it works for me :smiley:

Now I am having an issue with PhoneGap Build. My InAppBrowser and StatusBar plugins stop working when I download from PGB onto my iPad even though they both work on my iOS emulator.

I thought you could use PGB with Ionic. Is this not the case?


#14

Figured out my issue. I needed to add this line of code inside my index

<script type="text/javascript" src="phonegap.js"></script>

#15

Hey sorry there, this post got lost some how!

Yes Ionic can work with PGB, we just don’t include the phonegap.js script need for PGB.

Glad to see you were able to resolve this :smile:


#16

Interesting to read. I wonder if there is a document ‘what is’ and ‘what is not’ included in the default ionic install.
As a newbie I’m not 100% sure what I can use from Cordova, or PhoneGap, what is standard and what is different.

E.g. do I have to include the InAppBrowser cordova module. Or is this standard included.

There is a lot of information out there. But not everything points to the latest and it is not clear what has become obsolete and what is current.


#17

i m trying to open pdf file using iframe but it is not displaying in android. can you help me how to show external pdf file in ionic.


#18

It does work, I’m doing exactly this in my Ionic app! You need to include the corresponding cordova plugin. In general any plugin can be used with Ionic, if officially supported you will find an angular service matching the plugin, otherwise you’ll either build the matching angular service or use the plain javascript one.