macos - 是否有独立于平台的方法来打开 Outlook 插件中的链接？

问题描述

我有一个用 Angular 框架编写的 Outlook-addin，它通过 office-js 与 Outlook 通信。

我的目标是实现一项服务，可以在任何可以使用 Outlook 的主流平台中打开任何类型的 URL/链接，具体来说：在 Google Chrome、Safari、Firefox、Opera、Internet Explorer、MacOS 桌面 Outlook - 旧版本和新版本中或者大多数 Windows 桌面 Outlook 版本（2016、2019、O365）。但不幸的是，我找不到适用于所有平台的方法，我想避免以依赖于平台的方式实现它。

我遇到的第一个问题是，当我尝试通过简单的 js 函数打开链接时window.open(url)，使用 Internet Explorer 作为引擎的 Outlook 版本无法打开包含字符 # 的 URL。那是因为 IE 似乎无法读取这个字符，并且它通过 # 字符将 URL 减半，并完全删除了 # 后面的部分。

https://en.wikipedia.org/wiki/County_Antrim#/media/File:Ballycastle_Harbour_-_geograph.org.uk__-_468327.jpg

window.open(
  "https://en.wikipedia.org/wiki/County_Antrim#/media/File:Ballycastle_Harbour_-_geograph.org.uk_-_468327.jpg",
  "_blank"
);

例如，如果我尝试在使用 Internet Explorer 作为引擎的 Windows Outlook 2019 上打开上面的 URL，那么最后的 url 将如下所示：

https://en.wikipedia.org/wiki/County_Antrim

对于一个解决方案，我实现了一种解决方法，该解决方法通过 typescript 附带的内置函数对 URL 进行编码，该函数允许 IE 能够打开链接。通过简单地将编码的 URL 传递给window.open()是行不通的，因为它将 URL 与我的插件的主机连接起来，这会导致无效的链接。

window.open(
  encodeURIComponent(
    "https://en.wikipedia.org/wiki/County_Antrim#/media/File:Ballycastle_Harbour_-_geograph.org.uk_-_468327.jpg"
  ),
  "_blank"
);

我的插件的主机 + 编码的 URL：

https://localhost.eu.ngrok.io/https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FCounty_Antrim%23%2Fmedia%2FFile%3ABallycastle_Harbour_-_geograph.org.uk_-_468327.jpg

所以我不得不用一个简单的html代码手动重定向，如下所示：

重定向.html：

<html>
<head>
    <script type="text/javascript">
        window.onload = function (event) {
            var regex = /\?url=(.*)/ig;
            var match = regex.exec(location.search);
            if (match && match[1] && match[1] !== "") {
                location.href = decodeURIComponent(match[1]);
            }
            else {
                document.body.innerHTML = "Redirect failed!";
            }
        };
    </script>
</head>
</html>

打字稿代码：

url = "https://en.wikipedia.org/wiki/County_Antrim#/media/File:Ballycastle_Harbour_-_geograph.org.uk_-_468327.jpg"
window.open("./redirect.html?url=" + encodeURIComponent(url), "_blank");

不幸的是，这种方法在 MacOS 的桌面外观中也存在一些缺陷。重定向使链接在 Outlook 应用程序的简单 Web 查看器中打开，而不是在 Safari 中打开，因为默认浏览器在系统首选项和 Outlook 浏览器首选项中都设置为 Safari。尽管它可以打开这个webviewer中的链接，但我不能使用它，因为我要导航到的一些网页不支持被webviewer打开。

我怀疑这种行为是由 url 的相对性引起的（“./redirect ...”）。因此，我尝试通过以这种方式将插件的主机动态添加甚至硬编码到 URL 的开头来构建 URL：

`${window.location.origin + window.location.pathname}/redirect.html?url=` + encodeURIComponent(url);

但是这样做的结果没有区别，所以我猜测引用插件本身的主机不会改变 URL 的质量或状态，这意味着它仍然作为相对链接进行管理。

由于我有机会从另一台服务器托管 redirect.html，我尝试从另一台主机引用 redirect.html 文件，这样即使 MacOS Outlook 也能完美运行，这证明了我对相关链接管理错误的怀疑。

我也尝试过使用 office-js 提供的名为 openBrowserWindow 的函数，方法如下：

Office.context.ui.openBrowserWindow(url);

但这也是一个死胡同，因为它既不能处理 IE 中的 # 字符，也不能在我需要使用的所有平台中得到支持。

我尝试的最后一个解决方法是完全重新设计服务，而不是使用 js 或 ts 函数打开链接，我尝试将 url 绑定到<a></a>元素的 href 属性，但是应用程序要求排除了这种方法，因为有一些预计将通过双击打开的链接，据我所知，这不能通过使用<a>标签来完成，至少不是以“hacky”方式。

我真的很想知道，是什么让链接在 MacOS Outlook 应用程序的 webviewer 中打开，而不是在系统的默认浏览器中打开？这是我缺少的设置，还是有办法强制使用 safari？

标签： macosinternet-exploreroffice-jsoutlook-addinoutlook-web-addins

macos - 是否有独立于平台的方法来打开 Outlook 插件中的链接？

问题描述

解决方案

推荐阅读