Opening _blank links inside inappbrowser

We have 'external' anchor links in our cordova app, which we open using the _blank target of the inappbrowser plugin, which opens an inappbrowser instance 'above' the native app. These are generally links to our web-based support site.

Now, when the user is on our support site in the inappbrowser, we have links to third-party sites that use the standard target="_blank". However, users are not seeing a new instance of the inappbrowwser open, nor a system browser instance open, but rather the lone inappbrowser instance takes them away from the support site to the third-party site.

Any way to have the inappbrowser behavior with target="_blank" work as expected?

As InAppBrowser is designed, there can be only one instance of it, so your only choice is to open the external links on the system browser. You can listen for the loadstart event and if the url doesn't contain your domain then open it on the system browser, something like this:

var browserRef = window.cordova.InAppBrowser.open('http://www.yourdomain.com/support', '_blank');

browserRef.addEventListener('loadstart', function(event) {
    if((event.url).indexOf('www.yourdomain.com') === -1) {
        window.cordova.InAppBrowser.open(event.url, '_system');
    }
});

But I don't think that will avoid also loading the external site on the inAppBrowser window, so you will have to also inject javascript to return to the previous page on the inAppBrowser

browserRef.addEventListener('loadstop', function(event) {
    browserRef.executeScript({ code: 'window.history.back();' }, null);
});

The answer by jcesarmobile only partially works.

When you open the _system InAppBrowser, the reference to browserRef gets lost, along with the events mapped to 'loadstart' and 'loadstop'. This is a very bad behavior of InAppBrowser that comes from long ago. No idea if they intend to fix it. I have submitted an issue just in case.

In other words, this will only work for the first external link you open.

Further page loads will not behave the same anymore. The very inelegant solution that I found so far, was to re-instantiate the "_blank" browser after launching the "_system" browser. But for that, you must store the navigation history to be able to launch a new InAppBrowser with the previous URL.

The code below works for me, but sometimes the new InAppBrowser does not get displayed and I am investigating why.

libs: "ionic-native": "2.2.11" "typescript": "2.0.9"

import { Component } from '@angular/core';
import { InAppBrowser, Splashscreen } from 'ionic-native';
import { Platform } from 'ionic-angular';
import 'rxjs/Rx';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  browser: InAppBrowser;
  sysBrowser: InAppBrowser;
  urlHistory: string[] = [];
  url: string;

  constructor(public platform: Platform) {
    this.platform = platform;
    this.url = 'http://www.yourdomain.com/support';
  }

  ionViewDidLoad() {
    this.platform.ready().then(() => {
      this.browser = new InAppBrowser(this.url, '_blank', 'location=no,zoom=no,hidden=no');
      this.urlHistory.push(this.url);
      this.addEventsToBlankBrowser();
    });
  }

  addEventsToBlankBrowser() {
      this.browser.on('loadstart').subscribe(
        event => {
          if (event.url.indexOf('www.yourdomain.com') === -1) {
            let previousUrl = this.urlHistory.pop();
            this.browser.executeScript({ code: 'window.location.href = "' + previousUrl + '";' });
            this.sysBrowser = new InAppBrowser(event.url, '_system');
            this.url = previousUrl;
            this.urlHistory.push(previousUrl);
            this.browser = new InAppBrowser(previousUrl, '_blank', 'location=yes,zoom=no,hidden=no');
            this.browser.show();
            this.addEventsToBlankBrowser();
          } else {
            this.url = event.url;
            this.urlHistory.push(event.url);
          }
        }
      );
  }
}

As its mentioned in previous comments: InAppBrowser solution currently only support one InAppBrowser instance at a time. With "@ionic-native/core" version 4.12.2, typescript 2.6.2 with angular code an example implementation looks like:

import { NavController, Platform, LoadingController } from 'ionic-angular';
import { InAppBrowser } from "@ionic-native/in-app-browser";

export class HomePage {
  ref;

  constructor(public platform:Platform, private iab: InAppBrowser) {
    platform.ready().then(() => {
      this.initApp();
    })
  }

    openIAB(url, target, options){
    this.ref = undefined
    this.ref = this.iab.create(url, target, options)
    this.ref.on('loadstop').subscribe((event) => {
      console.log('loadstop')      
      this.ref.show();
    });

    this.ref.on('exit').subscribe((event) => {
      console.log(' exit called ')
      this.platform.exitApp();      
      });      
    }

    openSystemWindow(){ this.openIAB('http://www.google.com','_system', {location: 'no'}) }

    initApp(){
      this.openIAB('http://www.google.com','_blank',{location:'no', zoom:'no',
      clearcache: 'yes', hidden: 'yes', hardwareback:'no'})
    }
}

来源：https://stackoverflow.com/questions/40267276/opening-blank-links-inside-inappbrowser

标签

cordova

inappbrowser