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

Question

我想配置Capacitor打开所有链接，如下所示：

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

在Capacitor的应用内浏览器功能中。我知道我可以通过使用Browser API的open()方法打开它，但是我的一些超文本标记语言内容(以及它的链接)来自数据库。目前在iOS和安卓系统上，我的应用程序使用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

如果你不想“退出”到外部浏览器，你可能只需要添加到capacitor.config.json：

"server": {
  "allowNavigation": [
    "*"
  ]
}

Answer 2

下面是我使用的(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>
);