Question

我不希望在我的Ionic应用程序中打开链接，所以我试图在移动浏览器中打开链接。这里的第一个例子工作得很好。当URL在＆＃34; window.open＆＃34;内部时命令，然后按预期启动外部浏览器。

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

问题在于这个部分，我想将URL的参数提供给代码。我不能直接在＆＃34; window.open（）＆＃34;里面设置它，所以我必须把它移到＆＃39; ng-href＆＃39;然后通过＆＃39; this.href＆＃39;。

来引用它

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

如何最好地纠正这个问题？

+144223202320,+4403224202340

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数组中，如下所示：

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

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

4 个答案: