CODEWITHSUNDEEP
androidionic-frameworkbrowser
NorthFred
NorthFred

Reputation: 490

Ionic angular: opening links in (external) mobile browser

I do not want links to open inside my Ionic app, so I'm trying to get the links to open in the mobile browser. The first example here is working fine. When the URL is inside of the "window.open" command, then the external browser is launched as expected.

            <p class="descriptive-class">
               <a ng-href="" onclick="window.open('https://stackoverflow.com', '_system', 'location=yes')">
                  <img src="assets/img/awesome_picture.png" alt="blablabla">
               </a>
            </p>

The problem lays with this part, where I want to feed a parameter for the URL to the code. I cannot set it directly inside "window.open()", so I have to move it to 'ng-href' and then refer to it via 'this.href'.

Android does not seem to understand this correctly. It shows me the "Complete action using" dialog on Android, and then presents HTML document handler applications. It does not understand the browser link.

How can this be corrected best?

            <p class="descriptive-class">
               <a href="#" ng-href="item.webURL" onclick="window.open(this.href, '_system', 'location=yes')">
                  {{ item.webURL }}
               </a>
           </p>

Upvotes: 5

Views: 12973

Answers (4)

vr_driver
vr_driver

Reputation: 2085

Further to @Devner's excellent answer, for a 2021+ (Ionic5) release, You should do all of the above, but 2 things needed to change for me.

I had multiple variables to pass to it, that suggestion didn't work, but I did overcome the problem with the following:

<a href="#" (click)="openAnyPage(country_website,wp_id)">Open original article.</a>

Also, please note the following that was left off, according to the Cordova Documentation...

A target should be included: var ref = cordova.InAppBrowser.open(url, target, options); ref: Reference to the InAppBrowser window when the target is set to '_blank'. (InAppBrowser)

url: The URL to load (String). Call encodeURI() on this if the URL contains Unicode characters.

target: The target in which to load the URL, an optional parameter that defaults to _self. (String)

_system: Opens in the system's web browser.

Therefore, the following code brings it altogether:

openAnyPage(url, wp_id)
  {
    this.iab.create(url+"index.php?page_id="+wp_id, '_system');
  }

Upvotes: 0

Devner
Devner

Reputation: 7245

As of Feb 2020, this is what works in Ionic 4 & Ionic 5:

1) Install In App Browser plugin. Don't worry, it will open the links externally as you want it. Run the following commands in your project root:

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

2) In app.module.ts file, add the following code:

Add the import as shown below:

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

Add support for InAppBrowser by adding it to the providers array as shown below:

 providers: [
        StatusBar,
        SplashScreen,
        InAppBrowser, // ---> Add it here
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
    ],

3) In your desired component TS file or page TS file (example: support.page.ts), add the following code:

Add the import as shown below:

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

Add the code in constructor as shown below:

constructor(private iab: InAppBrowser) {}

Add a method that opens the link to your desired webpage as shown below:

openPage(){
        this.iab.create('https://stackoverflow.com/'); // --> Change URL here
}

Add click event to your hyperlink as shown below:

<a href="#" (click)="openPage()">{{ item.webURL }}</a>

Result:

Now when you click on the Hyperlink, that should open your desired URL.

NOTE:

If you do not want to hardcode the URL and would rather want to open URLs dynamically, then you can use the following in your HTML page:

<a href="#" (click)="openAnyPage(item.webURL)">{{ item.webURL }}</a>

Add the following in your TS file:

openAnyPage(url){
        this.iab.create(url);
}

Result:

Now when you click on any Hyperlink, that should open your desired URL, without the need to hardcode them anywhere.

Upvotes: 3

Nick Kuebler
Nick Kuebler

Reputation: 11

An update to @Gerben den Boer's answer:

You will run into errors like the following with the import as it is listed.

[ng] ERROR in src/app/components/app-component/app.module.ts(44,5): error TS2322: Type 'InAppBrowserOriginal' is not assignable to type 'Provider'.
[ng]   Type 'InAppBrowserOriginal' is not assignable to type 'ClassProvider'.
[ng]     Property 'provide' is missing in type 'InAppBrowserOriginal'.

To resolve this use the following import:

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

See: https://github.com/ionic-team/ionic-native/issues/2899

Upvotes: 1

Gerben den Boer
Gerben den Boer

Reputation: 124

In this case, the easiest way is to install the In App Browser plugin.

It opens an URL with the installed browser of the device. First add and install the plugin:

*$ ionic cordova plugin add cordova-plugin-inappbrowser*
*$ npm install --save @ionic-native/in-app-browser*

Add it to your app.module.ts

import { InAppBrowser } from '@ionic-native/in-app-browser';

And add it to your providers:

@NgModule({
  ...

  providers: [
    ...
    InAppBrowser
    ...
  ]
  ...
})

Then add on the relevant page:

constructor(private iab: InAppBrowser) { }

openBrowser(){
    this.iab.create('https://ionicframework.com/');
}

Call openBrowser() in your (click) method and you're set!

See also: https://ionicframework.com/docs/native/in-app-browser/

Upvotes: 9

Related Questions