Open all links in app browser

Ionic Framework ionic-v3
1

Hi,

I have some links in y content and the content is sent to me from the server. How can I open all of them in app browser. I am using ionic 2.

Thanks

2

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/

3

@sanjay100 Thanks.
It is said in the reference that I should use

document.addEventListener(“deviceready”, onDeviceReady, false);
function onDeviceReady() {
window.open = cordova.InAppBrowser.open;
}

However the above code is used in phone-gap, I assume. How can I use it in ionic 2? A more detailed question is that how can I add my custom js code in ionic?

4

you can still do the same thing in Ionic 2, the same work would work just fine, or you can do something like this instead:

import { Platform } from 'ionic-angular';


declare var window: any;
declare var cordova: any;
...


constructor(private platform: Platform) {

  platform.ready().then(() => {
    if (cordova && cordova.InAppBrowser) {
      window.open = cordova.InAppBrowser.open;
    }
  }):

}
4 Likes
5

@ihadeed
Thanks man. You really helped me A LOT :raised_hands:

6

Hi,

I’am trying to do exactly as you, but I can’t get it working :frowning: Could you precise the code you finally used ? Thanks

7

I haven’t done this yet.
I will let you know if it works for me.
Please let me know if you did it sooner.

8

Hello did you found working solution with InAppBrowser

9

Hi,
I was working on another problem of mine and haven’t had the time to do this yet. I will let you know in the next 2 to 3 days. Sorry
If you found the solution to this, please let us know using this post. Thanks

10

Well its working on android/windows using iframe, but not on ios coz security reasons doesn’t support http or https.
I also tried cordova.InAppBrowser but it open default browser not inside app content.

11

Just to make sure, have you installed Cordova inAppBrowser plugin?

12

yes I did using cordova plugin add cordova-plugin-inappbrowser but inside the app he doesn’t recognise cordova key word.
cordova.InAppBrowser.open(url,"_system", “location=yes”);

I tried to import Cordova and add inside constructor but still doesn’t see import att all.

13

Thanks for you update I will try other ways of doing this ans I will let you know.

Meanwhile I will be really happy if @ihadeed could help us since his answers helped a lot before.

14

inAppbrowser opens browser, and if you want inside content, solution is using iframe inside the ios app

add next code inside config.xml

15 
<platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <allow-intent href="http://*/*" />
        <allow-intent href="https://*/*" />
        <allow-navigation href="*" />
16

You will have to add declare var cordova: any; to the top of the document, and you also need to wrap it with something like if(typeof cordova !== 'undefined') so it doesn’t throw error while developing in the browser.

Another approach is to use the Ionic Native wrapper, which has browser fallback for development.

You can do something like:

import {InAppBrowser} from 'ionic-native';
declare var window: any;
@Component(...)
export class AppComponent {
   constructor() {
     window.open = (url, target?, opts?) => new InAppBrowser(url, target, opts);
   }

}
2 Likes
17 
  browser: InAppBrowser;
  url:string ='http://ionicframework.com/docs/v2/native/inappbrowser/';
  openBrowser() {
    let options ='location=no,toolbar=yes,hidden=no';
    this.browser= new InAppBrowser(this.url,'_blank',options);
    this.browser.show();
  }

in typescript this source is working for me

18

Still this open in new browser not inside the app. I need header bar and side menu.

19

@nadreal1010 If you open InAppBrowser using option location=yes or toolbar=yes and keeping target as _blank then plugin opens browser window inside an app, having back, forward button, along with address bar & close button.

InAppBrowser plugin generally open new browser window inside an app (using _blank) i.e. child window (acquires full width and height). Hence you are not getting original app header bar and side menu.
That what I learned about this plugin.

In your case you are opening browser through InAppBrowser plugin and at the same time you want to access side menu's toggle button, I guess (If I’m not wrong).

Maybe in this case you have to modify plugin’s java code. I’m not sure about this how this can be achievable.

If you found anything plz let us know. :wink:

20

@ihadeed a quick question, I have a payment gateway and I have to open it using inAppBrowser. How can I automatically return to app after payment is done?

1 Like