Question

我们的cordova应用中有'外部'锚点链接，我们使用inappbrowser plugin的_blank目标打开，这会在本机应用上方打开一个inappbrowser实例。这些通常是指向我们基于Web的支持网站的链接。

现在，当用户位于inappbrowser中的支持网站时，我们会链接到使用标准target="_blank"的第三方网站。但是，用户没有看到inappbrowwser的新实例打开，也没有打开system浏览器实例，而是单独的inappbrowser实例将它们从支持站点带到第三方站点。

如何使target="_blank"的inappbrowser行为按预期工作？

Answer 1

由于设计了InAppBrowser，因此只能有一个实例，因此您唯一的选择是在系统浏览器上打开外部链接。你可以监听loadstart事件，如果网址没有包含你的域，那么在系统浏览器上打开它，如下所示：

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');
    }
});

但我不认为这样可以避免在inAppBrowser窗口中加载外部网站，因此您还必须注入javascript以返回到inAppBrowser上的上一页

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

Answer 2

jcesarmobile 的答案仅部分有效。

当你打开_system InAppBrowser时，对browserRef的引用会丢失，同时映射到'loadstart'和'loadstop'的事件也会丢失。这是很久以前来自InAppBrowser的非常糟糕的行为。不知道他们是否打算修复它。我有submitted an issue以防万一。

换句话说，这只适用于您打开的第一个外部链接。

进一步的页面加载将不再相同。到目前为止，我发现的非常不优雅的解决方案是在启动“_system”浏览器后重新实例化“_blank”浏览器。但为此，您必须存储导航历史记录才能使用以前的URL启动新的InAppBrowser。

下面的代码对我有用，但有时新的InAppBrowser不会显示，我正在调查原因。

库： “离子原生”：“2.2.11” “打字稿”：“2.0.9”

| **ID** | **PARENT_ID** | **STARTED** | **DURATION** |
| test_01 | P_1 | 2017-01-12 10:21:53.000000 | 32 |
| test_02 | P_1 | 2017-01-12 10:22:53.000000 | 50 |
| test_03 | P_1 | 2017-01-12 11:23:53.000000 | 19 |
| test_04 | P_1 | 2017-01-12 11:24:53.000000 | 39 |
| test_05 | P_1 | 2017-01-12 12:25:53.000000 | 49 |
| test_06 | P_1 | 2017-01-12 12:26:53.000000 | 59 |
| test_07 | P_1 | 2017-01-12 13:27:53.000000 | 69 |
| test_08 | P_1 | 2017-01-12 13:28:53.000000 | 79 |
| test_09 | P_1 | 2017-01-12 14:29:53.000000 | 98 |
| test_10 | P_1 | 2017-01-12 15:30:53.000000 | 99 |

Answer 3

如之前的评论中所述：InAppBrowser解决方案当前一次仅支持一个InAppBrowser实例。对于“ @ ionic-native / core”版本4.12.2，带有角度代码的打字稿2.6.2，示例实现如下所示：

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'})
    }
}

在inappbrowser中打开_blank链接

3 个答案: