cordova - 如何在 Capacitor 的应用内浏览器中打开所有链接？

Question

我想配置 Capacitor 以打开所有链接，例如:

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

在 Capacitor 的应用内浏览器功能中。我知道我可以使用 open() 打开它 Browser API的方法，但我的一些 HTML 内容(以及它的链接)来自数据库。目前在 iOS 和 Android 上，我的应用程序使用外部浏览器(例如 Safari)打开上面的链接。

资料来源:

https://capacitor.ionicframework.com/docs/apis/browser

编辑 - 我目前不太喜欢的解决方案:

    if (this.$q.platform.is.capacitor) {
      document.onclick = function(event: any): boolean | void {
        const element: any = event.target || event.srcElement;

        if (element.tagName === 'A' && element.target === '_blank' && element.href) {
          event.preventDefault();
          Browser.open({ url: element.href });
          return true;
        }
      };
    }

Answer 1

这是我使用的基本版本( react ):

// override window.open

import {
  Capacitor,
  Plugins,
} from '@capacitor/core';

const { Browser } = Plugins;

if (Capacitor.isNative) {
  window.open = async url => Browser.open({ url });
}

// custom component that links

const { label, link, onClick } = props;
const handleClick = (e) => {
    if (link) {
      window.open(link, '_blank');
    } else if (onClick) {
      onClick(e);
    }
  };
return (
  <div onClick={handleClick}>{label}</div>
);