支持较旧的 Microsoft Webview 和 Office 版本

  • 项目

Office 加载项是在 Office web 版 上运行时显示在 iframe 中的 Web 应用程序。 在 Windows 上的 Office 或 Mac 上的 Office 中运行时，使用嵌入式浏览器控件 (也称为 Web 视图) 显示 Office 加载项。 嵌入式浏览器控件由操作系统或用户计算机上安装的浏览器提供。

重要

Office 加载项中仍使用 Internet Explorer 和 Microsoft Edge 旧版 中的 Web 视图

平台和 Office 版本的一些组合（包括通过 Office 2019 的批量许可永久版本）仍使用 Internet Explorer 11 (附带的 Web 视图控件（称为“Trident”) 和名为“EdgeHTML”) Microsoft Edge 旧版 (）来托管加载项，如 Office 外接程序使用的浏览器和 Webview 控件中所述。Internet Explorer 11 于 2023 年 2 月在 Windows 10 和 Windows 11 中被禁用，用于启动它的 UI 已删除;但它仍随这些操作系统一起安装。 因此，Office 仍可通过编程方式调用 Internet Explorer 中的 Trident 和其他功能。

我们建议 (但不需要) 支持这些组合（至少以最小方式），方法是在加载项在这些 Web 视图中启动时向外接程序的用户提供正常失败消息。 请记住以下附加要点：

  • Office web 版不再在 Internet Explorer 或Microsoft Edge 旧版中打开。 因此，AppSource 不会在这些浏览器中Office web 版中测试加载项。
  • AppSource 仍会测试使用 Trident 或 EdgeHTML 的平台和 Office 桌面 版本的组合。 但是，仅当加载项不支持这些 Web 视图时，才会发出警告;AppSource 不会拒绝加载项。
  • Script Lab工具不再支持 Trident。

如果计划支持较旧版本的 Windows 和 Office，则外接程序必须在这些版本使用的可嵌入浏览器控件中工作。 例如，基于 Internet Explorer 11 (IE11 的浏览器控件) 或Microsoft Edge 旧版 (基于 EdgeHTML 的) 。 有关 Windows 和 Office 的哪些组合使用这些浏览器控件的信息，请参阅 Office 外接程序使用的浏览器和 Web 视图控件。

确定加载项在运行时运行的 Web 视图

加载项可以通过读取 window.navigator.userAgent 属性来发现它正在运行的 Web 视图。 这使外接程序能够提供备用体验或正常失败。 下面是一个示例，用于确定加载项是在 Trident 还是 EdgeHTML 中运行。

if (navigator.userAgent.indexOf("Trident") !== -1) {
    /*
       Trident is the webview in use. Do one of the following:
        1. Provide an alternate add-in experience that doesn't use any of the HTML5
           features that aren't supported in Trident (Internet Explorer 11).
        2. Enable the add-in to gracefully fail by adding a message to the UI that
           says something similar to:
           "This add-in won't run in your version of Office. Please upgrade either to
           perpetual Office 2021 (or later) or to a Microsoft 365 account."
    */
} else if (navigator.userAgent.indexOf("Edge") !== -1) {
    /*
       EdgeHTML is the browser in use. Do one of the following:
        1. Provide an alternate add-in experience that's supported in EdgeHTML (Microsoft Edge Legacy).
        2. Enable the add-in to gracefully fail by adding a message to the UI that
           says something similar to:
           "This add-in won't run in your version of Office. Please upgrade either to
           perpetual Office 2021 (or later) or to a Microsoft 365 account."
    */
} else {
    /* 
       A webview other than Trident or EdgeHTML is in use.
       Provide a full-featured version of the add-in here.
    */
}

注意

Microsoft Edge (Chromium) 返回edg/后跟一个或多个版本数字和零个或多个.分隔符作为用户代理;例如 edg/76.0.167.1。 请注意， e 名称末尾不存在 ！ 它是“edg”，而不是“edge”。

此 JavaScript 应尽可能早地出现在加载项启动过程中。 下面是加载项主页的示例，建议用户在检测到 Trident 时升级 Office。

<!doctype html>
<html lang="en" data-framework="typescript">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contoso Task Pane Add-in</title>

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
</head>

<body>
    <div id="main">
         <!-- 
            The add-in UI is here. 
         -->
    </div>

    <!-- 
        The script below makes the following div display if the
        webview is Trident, and hides the regular div. 
    -->
    <div id="tridentmessage" style="display: none; padding: 10;">
        This add-in will not run in your version of Office. Please upgrade either to 
        perpetual Office 2021 (or later) or to a Microsoft 365 account.
    </div>
    <script>
        if (navigator.userAgent.indexOf("Trident") !== -1) {
            var tridentMessage = document.getElementById("tridentmessage");
            var normalUI = document.getElementById("main");
            tridentMessage.style.display = "block";
            normalUI.style.display = "none";
        } 
    </script>
</body>
</html>

重要

读取 userAgent 属性并不总是一种好的做法。 请确保熟悉 使用用户代理的浏览器检测一文，包括阅读 userAgent的建议和替代方法。 特别是，如果要提供备用加载项体验来支持 Trident 的使用，请考虑使用功能检测而不是对用户代理进行测试。 但是，如果你只是提供加载项在 Trident 中不起作用的通知，在这种情况下，使用 userAgent 是合适的。

截至 2023 年 7 月 24 日，本文的非英语版本都不同程度地过期：有些已超过 12 年过期。

截至同一日期，本文英文版的“用户代理的哪一部分包含你要查找的信息？”部分中的文本和表不再提及 Trident 或 Internet Explorer 11。 在 “浏览器名称和版本”表中，Internet Explorer 11 的行如下所示：

Engine 必须包含 不得包含
Internet Explorer 11 Trident/7.0; .*rv:xyz

在 呈现引擎的表中，Trident 的行如下所示：

Engine 必须包含 评论
三叉戟 Trident/xyz Internet Explorer 将此片段置于 User-Agent 字符串的注释部分中。

查看 Webview 和 Office 版本支持信息

有关如何支持特定 Web 视图和 Office 版本的详细信息，请选择适用的选项卡。

与 Trident 关联的 JavaScript 引擎不支持 ES5 之后的 JavaScript 版本。 若要使用更现代的 JavaScript 版本或使用 TypeScript，请参阅 对最新版本的 JavaScript 的支持。

重要

Trident 不支持某些 HTML5 功能，例如媒体、录制和位置。 如果外接程序必须支持 Trident，则必须设计加载项以避免这些不受支持的功能，或者外接程序必须检测使用 Trident 何时被使用，并提供不使用不受支持的功能的替代体验。 有关详细信息，请参阅确定加载项 在运行时运行的 Web 视图。

在 Trident (Internet Explorer) 上测试加载项

请参阅 Trident 测试。

对最新版本的 JavaScript 的支持

如果要使用代码运行的 Web 视图或运行时中支持的 JavaScript 版本的语法和功能，或者想要使用 TypeScript，则必须使用转译器或 polyfill 或两者兼有。 例如，转译器会将语法或运算符（如 => ES5 中未知的运算符）转换为 ES5。 polyfill 将较新版本 JavaScript 中的方法、类型和类替换为旧版本中的等效功能。

以下小节假定目标 JavaScript 标准为 ES5，但该信息也适用于其他目标。 例如，如果目标是 ECMAScript 2016，则只需将这些小节中的“ES5”替换为“ECMAScript 2016” (，将“post-ES5”替换为“post-ECMAScript 2016”) 。

使用转码器

可以在 TypeScript 或新式 JavaScript 中编写代码，然后在生成时将其转译为 ES5 JavaScript。 生成的 ES5 文件是上传到加载项 Web 应用程序的内容。

有两种流行的转译器。 两者都可以使用 TypeScript 或 ES5 后 JavaScript 的源文件。 它们还适用于 React 文件 (.jsx 和 .tsx) 。

有关在外接程序项目中安装和配置转码器的信息，请参阅其中任一文档。 建议使用任务运行程序（如 Grunt 或 WebPack ）自动执行转译。 有关使用 tsc 的示例外接程序，请参阅 Office 外接程序 Microsoft Graph React。 有关使用 babel 的示例，请参阅 脱机存储加载项。

注意

如果使用 Visual Studio (不Visual Studio Code) ，则 tsc 可能最容易使用。 可以使用 nuget 包安装对它的支持。 有关详细信息，请参阅 Visual Studio 中的 JavaScript 和 TypeScript。 若要将 babel 与 Visual Studio 配合使用，请创建生成脚本或使用 Visual Studio 中的任务运行器资源管理器，以及 WebPack 任务运行器 或 NPM 任务运行器等工具。

使用 polyfill

polyfill 是早期版本的 JavaScript，它与较新版本的 JavaScript 的功能重复。 polyfill 在不支持更高 JavaScript 版本的 Web 视图中工作。 例如，字符串方法 startsWith 不是 ES5 版本的 JavaScript 的一部分，因此它不会在 Trident (Internet Explorer 11) 中运行。 有一些以 ES5 编写的 polyfill 库，用于定义和实现 startsWith 方法。 建议使用 core-js polyfill 库。

若要使用 polyfill 库，请像加载任何其他 JavaScript 文件或模块一样加载它。 例如，可以在外接程序的主页 HTML 文件中使用 <script> 标记 (例如 <script src="/js/core-js.js"></script>) ，也可以在 JavaScript 文件中使用 import 语句， (例如 import 'core-js';) 。 当 JavaScript 引擎看到类似 startsWith的方法时，它会首先查看语言中是否内置了该名称的方法。 如果有，它将调用本机方法。 如果并且仅当方法不是内置方法时，引擎才会查找它的所有已加载文件。 因此，在支持本机版本的浏览器中不使用 polyfilled 版本。

导入整个 core-js 库将导入所有 core-js 功能。 还可以仅导入 Office 外接程序所需的填充。 有关如何执行此操作的说明，请参阅 CommonJS API。 core-js 库包含所需的大部分填充。 core-js 文档的 缺少 Polyfills 部分详细介绍了一些例外。 例如，它不支持 fetch，但你可以使用 提取 polyfill。

有关使用 core.js 的示例外接程序，请参阅 Word 外接程序 Angular2 StyleChecker。

另请参阅