Ionic应用程序如何在系统浏览器中打开链接。

Question

我希望在系统浏览器中打开链接，例如在iOS上使用Safari，在安卓上使用Chrome（无论默认浏览器是什么）。

问题在于链接确实会在系统浏览器中打开，但它也会在应用程序中打开。我希望链接只在系统浏览器中打开，而不是在应用程序内部打开。

这是我的代码。

<a ng-href="http://example.com/login/{{user._id}}" onclick="window.open(this.href, '_system', 'location=yes')" class="ion-home color-primary item"> Dashboard</a>

请注意，我也向我的终端传递了一个ID。

- Millenial2020

Answer 1

尝试

<a class="ion-home color-primary item" href="#" onclick="window.open('http://example.com/login/{{user._id}}', '_system', 'location=yes'); return false;"> Dashboard</a>

- Santiago

---

这个选项需要插件吗？ - Miguel Carvajal

不，它应该在设备的默认浏览器中打开。如果您想要在不离开应用程序的情况下打开窗口，则可能需要插件。 - Santiago

这对我来说非常有效。在我的情况下，我需要使用设备浏览器打开链接，因为我希望用户能够在文档中查找文本。而且我无法使用inAppBrowser来实现这一点。 - Alfonso

在Ionic 4中，这个方法会在Android上打开URL，但在iOS上则完全不起作用。虽然Ionic已经有所改变，但我不会对这个答案进行贬低评价，因为InAppBrowser插件的效果要好得多。 - BIBD

嘿，你的解决方案对我也起作用了，但是你能否解释一下 _system 和 location=yes 是什么意思？ - Parth Savaliya

Answer 2

在较新的版本（3.0）中，应用浏览器插件是更好的解决方案。

<button ion-button block clear (click)="openWebpage(url)">Open Webpage</button>

openWebpage方法的实现如下

 openWebpage(url: string) {
        const options: InAppBrowserOptions = {
          zoom: 'no'
        }

        // Opening a URL and returning an InAppBrowserObject
        const browser = this.inAppBrowser.create(url, '_self', options);

       // Inject scripts, css and more with browser.X
      }

- Prashant

---

目标不应该是“_self”。它应该是“_system”以满足实际问题。 - Mark McCorkle

Answer 3

您可以使用InAppBrowser插件来实现此功能，插件链接为：https://cordova.apache.org/docs/en/3.0.0/cordova/inappbrowser/inappbrowser.html 如果您不想使用插件，请看一下我在类似问题上的回答：https://dev59.com/a2Ij5IYBdhLWcg3wq21z#30397786 编辑：如果您已经在使用插件，则可能需要删除onclick代码并添加target="_system"，或在onclick处理程序中添加event.preventDefault();。

- Frane Poljak

Answer 4

Capacitor提供了一个易于使用的插件来启动应用内浏览器。

https://capacitorjs.com/docs/apis/browser

安装方法:

npm install @capacitor/browser
npx cap sync

使用方法：

import { Browser } from '@capacitor/browser';

const openCapacitorSite = async () => {
    await Browser.open({ url: 'http://capacitorjs.com/' });
};

- Tobija Fischer

---

对于大多数跨平台的目的，这是我发现的最可靠的解决方案。它还有一个额外的好处，在移动设备上显示“完成”按钮，让您返回应用程序。 - Alec Daling

Answer 5

简单解决方案

<a href="#" onclick="window.open('https://www.badhaobusiness.in',
     '_system', 'location=yes'); return false;"> www.badhaobusiness.in</a>

- Shashwat Gupta

Answer 6

在 ActionSheet 中使用此方法打开链接到另一个浏览器：

import { ActionSheetController} from '@ionic/angular';

...
constructor(public actionSheet: ActionSheetController) {}

async presentActionSheet() {
 const action = await this.actionSheet.create({
  buttons: [{
    text: 'Open link',
    icon: 'link-outline'
    handler: () => {
      window.open('http://google.com');
     }
    }]
  });
   await action.present();
 }
}

- Don Benito

Answer 7

这是最简单的解决方案：

<a href="https://google.com/" target="_blank">google.com</a>

- Jurakin