Open all links in app browser

Ionic Framework ionic-v3
21

Hi, thanks for your answer. I tried your method but when i tap on the links it opens the system browser instead of the inappbrowser. Here’s my code:

[…imports and stuff]
import { InAppBrowser } from ‘ionic-native’;

declare var window: any;

@Component({
templateUrl: ‘my-page.html’,
})
export class MyPage {
model: Model;

constructor(private nav: NavController, params: NavParams) {
window.open = (url, target?, opts?) => {
console.log(‘window.OPEN CALLED’);
(new InAppBrowser(url, ‘_blank’, ‘location=yes’));
};
this.model = params.get(‘modelData’);
}
}

I don’t see the log when I tap on the links.
Maybe it’s because the link is a simple a href=‘’. I tried to assign my custom method to window.location.assign but it’s giving me an error saying that location is read only. I also tried to add target=‘_blank’ to every link but it still opens them in the external browser.

22

awesome, it works for me!!! YEAAAAAA

23

why can’t u use iframe???

24

I’m using ionic2 and its solution does not work.
I’m doing so based on the ionic documentation, but it gives error. How to solve?

Runtime Error
Cannot find module “@ionic-native/core”

import { Component } from '@angular/core';
import { NavController, NavParams} from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';

@Component({
  selector: 'page-villa',
  templateUrl: 'villa.html'
})

export class VillaPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private iab: InAppBrowser) {

  }

 openLinkUrl() {
  const browser = this.iab.create('https://ionic.io');
  browser.show();
}

}
1 Like
25

Same error: Uncaught Error: Cannot find module “@ionic-native/core”

26

Solved issue: https://github.com/driftyco/ionic-native/blob/master/README.md

delete node_modules and add modules on package.json: "ionic-angular": "2.0.1" and "rxjs": "^5.2.0"
reinstall node_modules:
npm install && npm install --save-dev

by last:
npm install @ionic-native/core --save

1 Like
27

What is the error that you’re getting?

28

Corrected the error, created a blank test application, installed the plugin and updated the typescript. The problem now is that the page only opens in the device browser, it does not open in the application. I’ve tested all the targets and it’s the result same thing. Where is the error?

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [InAppBrowser]
})

export class HomePage {

  constructor(public navCtrl: NavController, private iab: InAppBrowser ) {

  }

  launchUrl() {
       const browser = this.iab.create('https://ionic.io', '_self', "location=yes");
       browser.show();
  }

}
1 Like
29

I am having a similar issue @lidymonteiro - in app browser is not opening, but only opening the URL in the device browser. When I run through Xcode, it gives me the following output: “Tried to show IAB after it was closed.”

30

The truth was I worked but it was damaged in other ionic interactions, I had to upgrade to the latest stable version of ionic and cordova if I did not have something updated. :smirk: :confused:

31

Thanks my error is removed but nothing shows in app only blank scree.

32

Sorry for reaching you late.

In my case, I have to open OneDrive and Outlook from InAppBrowser.
If I open above inside iFrame then it will not get open in mobile because of security reason.

You can check this once.

33

I had used inappbrowser for my app it is working fine…

34

Is anyone getting this error with in app browser?

/Plugins/org.apache.cordova.inappbrowser/CDVInAppBrowser.h:23:9: fatal error: 'Cordova/CDVWebViewDelegate.h' file not found
#import <Cordova/CDVWebViewDelegate.h>

plugins:

$ ionic plugin list
cordova-plugin-console 1.0.7 "Console"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-hockeyapp 2.2.4 "HockeyApp"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
ionic-plugin-deploy 0.6.7 "IonicDeploy"
ionic-plugin-keyboard 2.2.1 "Keyboard"
org.apache.cordova.inappbrowser 0.2.5 "InAppBrowser"```

and ionic info:

$ ionic info

Your system information:

Cordova CLI: 7.0.0 
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: 1.9.0 
ios-sim version: 4.1.1 
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.2 Build version 8E2002
35

Some of you might looking for “how to open links in a normal (system) browser, like in chrome or safari”.

If so, here is the solution:

You don’t need to install any plugins or import something in your .ts files, just write in your .html this one:

<a onclick="window.open('https://www.facebook.com/qurban.qurbanov.37', '_system', 'location=yes')">Gurban Gurbanov</a>

That will take you to your default browser (Chrome in my case) and will request the targeted URL

1 Like
36

I got it working but the issue is once I press the back button on the page, it will show a white page :confused: why is it so?

37

Hey guy, I have the same problem, Did you fix it? In my case in IOS it just opens a new system browser, not an inappbrowser and on Android once I press the back button on the page, I will just show a white page or It goes back to the home page.

I read a lot about and many people said that It worked before. What’s going in on? Did is It broken through some ionic update?

38

Can’t get it to work :frowning: It’s stil opening in the system browser. Getting this error: Cannot use ‘new’ with an expression whose type lacks a call or construct signature.

Here’s my code:

39

I tried using an Angular HostListener to capture all click events and then pass through to inAppBrowser. I had to create some interfaces to extend EventTarget to capture the href of the anchor.

interface EventClickTarget extends EventTarget {
    href: string    
}

interface EventClick extends EventTarget {
    target: EventClickTarget
}

......

@HostListener('document:click', ['$event'])
      handleClick(event: EventClick) {
         
         if(event.target && event.target.href){
             this.openBrowser(event.target.href);
         }

         return false; 
      }

openBrowser(href){
        let target = "_blank";
        this.inAppBrowser.create(href,target,this.options);
}
40

did it work? I’m not very familiar with TS Interfaces so I’m not really sure how to apply your code.