如何打开 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

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

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

Answer 1

如果您不想“退出”到外部浏览器，也许您只需要添加到电容器.config.json：

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

Answer 2

这是我使用的基本版本（反应）：

// 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>
);