Ionic InAppBrowser 网站 - 如果已安装，请在应用程序中打开 Twitter 链接

Question

我在 Android 手机上部署了一个 Ionic 应用程序，它使用 InAppBrowser 打开一个网站。网站上有一个指向 Twitter 个人资料的按钮链接。

目前 Twitter 按钮在用户默认浏览器中打开。

如果安装在用户手机上，如何让按钮打开 Twitter 应用程序？

提前致谢。

编辑

export class HomePage {

  constructor(public navCtrl: NavController, private inAppBrowser: InAppBrowser, public platform: Platform, private appAvailability: AppAvailability) {
      const options: InAppBrowserOptions = {
          toolbar: 'no',
          location: 'no',
          zoom: 'no'
      }


     this.platform.ready().then( () => {

        const browser = this.inAppBrowser.create("https://awebsitewithfblink", '_blank', options);

        browser.addEventListener('loadstart', function(event) { alert(event.type + ' - ' + event.url); } );
     })


  }
}

我得到错误：

Error: Uncaught (in promise): TypeError: browser.addEventListener is not a function
TypeError: browser.addEventListener is not a function
    at http://localhost:8100/build/main.js:74:21
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:5134:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
    at r.run (http://localhost:8100/build/polyfills.js:3:10143)
    at http://localhost:8100/build/polyfills.js:3:20242
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)
    at c (http://localhost:8100/build/polyfills.js:3:19752)
    at http://localhost:8100/build/polyfills.js:3:20273
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5125:33)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)
    at o (http://localhost:8100/build/polyfills.js:3:7894)
    at e.invokeTask [as invoke] (http://localhost:8100/build/polyfills.js:3:16823)
    at p (http://localhost:8100/build/polyfills.js:2:27648)
    at HTMLDocument.v (http://localhost:8100/build/polyfills.js:2:27893)

Answer 1

我不知道您使用哪个 Ionic 版本，所以我会尽力为您提供最佳解决方案：

在 Ionic 1 中： 你可以简单地做：<a href="twitter://twitter.com/somePATH">

在 Ionic 2/3 中：我不知道第一种方法是否仍然有效，从未尝试过，但应该这样做：

首先：安装插件

ionic plugin add cordova-plugin-inappbrowser        // For open the app
ionic plugin add cordova-plugin-appavailability     // For check if app is installed
ionic plugin add cordova-plugin-device              // For check which device the user use

第二：导入它们

import { InAppBrowser, AppAvailability, Device } from 'ionic-native';

第三：检查设备/如果应用程序在这里的完整解决方案：

launchExternalApp(iosSchemaName: string, androidPackageName: string, appUrl: string, httpUrl: string, username: string) {
let app: string;
if (Device.device.platform === 'iOS') {
    app = iosSchemaName;
} else if (Device.device.platform === 'Android') {
    app = androidPackageName;
} else {
    let browser = new InAppBrowser(httpUrl + username, '_system');
    return;
}

AppAvailability.check(app).then(
    () => { // success callback
        let browser = new InAppBrowser(appUrl + username, '_system');
    },
    () => { // error callback
        let browser = new InAppBrowser(httpUrl + username, '_system');
    }
);
}

openTwitter(username: string) {
    this.launchExternalApp('twitter://', 'com.twitter.android', 'twitter://user?screen_name=', 'https://twitter.com/', username);
}

来源 1：https://forum.ionicframework.com/t/open-facebook-twitter-app-from-my-android-app/9757/3

来源 2：https://forum.ionicframework.com/t/ionic-opening-external-app/77932/3

编辑：

由于您想在 InAppBrower 网站上执行操作，我发现此代码对您有用：

var twitterWindow = window.open("https://twitter.com/", '_blank', 'location=no');
twitterWindow.addEventListener('loadstart',  function(event) {
                        alert("Current Event : "+ event.url);
                    });

来源 3：Getting URL of InAppBrowser

你只需要控制这个 URL 并检查它是否是一个 Twitter URL。如果是一个，你只需要像我之前的回答那样做。