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 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 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.
读取 属性通常不是一种好的做法 userAgent
。 请确保熟悉 使用用户代理的浏览器检测一文,包括阅读 userAgent
的建议和替代方法。 特别是,如果要提供备用加载项体验来支持 Trident 的使用,请考虑使用功能检测而不是对用户代理进行测试。
截至 2021 年 9 月 30 日, 用户代理的哪一部分包含你正在查找的信息? 部分中的文本日期是 Internet Explorer 11 (发布之前和最新版本的 Trident) 。 它通常仍然准确,并且本文英文版部分中的 表 是最新的。 文章的非英语版本中的文本和大多数情况下的表都已过期。
有关如何支持特定 Web 视图和 Office 版本的详细信息,请选择适用的选项卡。
三叉 (Internet Explorer)
EdgeHTML (Microsoft Edge 旧版)
Trident 不支持某些 HTML5 功能,例如媒体、录制和位置。 如果外接程序必须支持 Trident,则必须设计加载项以避免这些不受支持的功能,或者外接程序必须检测使用 Trident 何时被使用,并提供不使用不受支持的功能的替代体验。 有关详细信息,请参阅确定加载项 在运行时运行的 Web 视图。
对最新版本的 JavaScript 的支持
与 Trident 关联的 JavaScript 引擎不支持 ES5 之后的 JavaScript 版本。 如果要使用 ECMAScript 2015 或更高版本或 TypeScript 的语法和功能,则必须使用转译器或 polyfill 或两者。 转译器会将语法或运算符(如 =>
ES5 中未知的运算符)转换为 ES5。 polyfill 将 ECMAScript 2015 (ES6) 或更高版本中的方法、类型和类替换为 ES5 中的等效功能。
使用转码器
可以在 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 2019 中的 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。
在 Trident (Internet Explorer) 上测试加载项
请参阅 Trident 测试。
排查 EdgeHTML 问题
如果在开发外接程序以支持Microsoft Edge 旧版时遇到问题,请参阅 Office 加载项使用的浏览器和 Webview 控件的“Microsoft Edge) 问题”部分的“EdgeHTML 和 WebView2 (Microsoft Edge) 问题” 部分。
调试支持 EdgeHTML (Microsoft Edge 旧版) 的加载项
若要调试支持 EdgeHTML 的加载项,请使用以下选项之一。
在 Microsoft Edge 旧版 中使用开发人员工具调试加载项
使用适用于 Visual Studio Code 的 Microsoft Office 外接程序调试器扩展调试加载项
Office 加载项使用的浏览器和 Web 视图控件
ECMAScript 6 兼容性表
是否可以使用...HTML5、CSS3 等的支持表