离子角度：在（外部）移动浏览器中打开链接

Question

我不想在我的 Ionic 应用程序中打开链接，所以我试图让链接在移动浏览器中打开。 这里的第一个例子工作正常。当 URL 在“window.open”命令中时，外部浏览器会按预期启动。

            <p class="descriptive-class">
               <a ng-href="" onclick="window.open('https://stackoverflow.com', '_system', 'location=yes')">
                  <img src="assets/img/awesome_picture.png" alt="blablabla">
               </a>
            </p>

问题在于这部分，我想将 URL 的参数提供给代码。我不能直接在“window.open()”中设置它，所以我必须将它移动到“ng-href”，然后通过“this.href”引用它。

Android 似乎没有正确理解这一点。它向我展示了 Android 上的“使用完成操作”对话框，然后展示了 HTML 文档处理程序应用程序。它不理解浏览器链接。

如何最好地纠正这种情况？

            <p class="descriptive-class">
               <a href="#" ng-href="item.webURL" onclick="window.open(this.href, '_system', 'location=yes')">
                  {{ item.webURL }}
               </a>
           </p>

Answer 1

在这种情况下，最简单的方法是安装 In App Browser 插件。

它会使用已安​​装的设备浏览器打开一个 URL。首先添加并安装插件：

*$ ionic cordova plugin add cordova-plugin-inappbrowser*
*$ npm install --save @ionic-native/in-app-browser*

将其添加到您的 app.module.ts

import { InAppBrowser } from '@ionic-native/in-app-browser';

并将其添加到您的供应商：

@NgModule({
  ...

  providers: [
    ...
    InAppBrowser
    ...
  ]
  ...
})

然后在相关页面上添加：

constructor(private iab: InAppBrowser) { }

openBrowser(){
    this.iab.create('https://ionicframework.com/');
}

在您的（点击）方法中调用openBrowser()，您就可以设置了！

另请参阅：https://ionicframework.com/docs/native/in-app-browser/

Answer 2

截至 2020 年 2 月，这在 Ionic 4 和 Ionic 5 中有效：

1) 安装In App Browser plugin。不用担心，它会根据需要从外部打开链接。在项目根目录中运行以下命令：

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

2) 在app.module.ts文件中，添加如下代码：

如下图添加导入：

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

通过将InAppBrowser 添加到providers 数组来添加对InAppBrowser 的支持，如下所示：

 providers: [
        StatusBar,
        SplashScreen,
        InAppBrowser, // ---> Add it here
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
    ],

3) 在您想要的组件 TS 文件或页面 TS 文件中（示例：support.page.ts），添加如下代码：

如下图添加导入：

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

在构造函数中添加如下代码：

constructor(private iab: InAppBrowser) {}

添加一个方法来打开您所需网页的链接，如下所示：

openPage(){
        this.iab.create('https://stackoverflow.com/'); // --> Change URL here
}

为您的超链接添加点击事件，如下所示：

<a href="#" (click)="openPage()">{{ item.webURL }}</a>

结果：

现在，当您单击超链接时，应该会打开您想要的 URL。

注意：

如果您不想对 URL 进行硬编码，而是希望动态打开 URL，那么您可以在 HTML 页面中使用以下内容：

<a href="#" (click)="openAnyPage(item.webURL)">{{ item.webURL }}</a>

在您的 TS 文件中添加以下内容：

openAnyPage(url){
        this.iab.create(url);
}

结果：

现在，当您单击任何超链接时，应该会打开您想要的 URL，而无需在任何地方对其进行硬编码。

Answer 3

@Gerben den Boer 的回答更新：

您将在导入列出的内容时遇到如下错误。

[ng] ERROR in src/app/components/app-component/app.module.ts(44,5): error TS2322: Type 'InAppBrowserOriginal' is not assignable to type 'Provider'.
[ng]   Type 'InAppBrowserOriginal' is not assignable to type 'ClassProvider'.
[ng]     Property 'provide' is missing in type 'InAppBrowserOriginal'.

要解决此问题，请使用以下导入：

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

见：https://github.com/ionic-team/ionic-native/issues/2899

Answer 4

除了@Devner 的出色回答，对于 2021+ (Ionic5) 版本， 您应该执行以上所有操作，但我需要更改两件事。

我有多个变量要传递给它，该建议不起作用，但我确实通过以下方法克服了这个问题：

<a href="#" (click)="openAnyPage(country_website,wp_id)">Open original article.</a>

另外，请注意以下内容，根据Cordova Documentation...

应该包括一个目标： var ref = cordova.InAppBrowser.open(url, target, options); ref：当目标设置为“_blank”时对 InAppBrowser 窗口的引用。 (InAppBrowser)

url：要加载的 URL（字符串）。如果 URL 包含 Unicode 字符，则在此调用 encodeURI()。

target：加载 URL 的目标，可选参数，默认为 _self。 （字符串）

_system：在系统的网络浏览器中打开。

因此，下面的代码一并带来：

openAnyPage(url, wp_id)
  {
    this.iab.create(url+"index.php?page_id="+wp_id, '_system');
  }