Поддержка старых веб-представлений Майкрософт и версий Office

  • Статья

Надстройки Office — это веб-приложения, которые отображаются внутри iframe при выполнении на Office в Интернете. Надстройки Office отображаются с помощью встроенного элемента управления браузера (также известного как веб-представление) при запуске в Office в Windows или Office на Компьютере Mac. Внедренные элементы управления браузера предоставляются операционной системой или браузером, установленным на компьютере пользователя.

Важно!

Веб-представления из Интернет-Обозреватель и устаревшая версия Microsoft Edge по-прежнему используются в надстройках Office

Некоторые сочетания платформ и версий Office, включая корпоративные бессрочные версии office 2019, по-прежнему используют элементы управления webview, которые поставляются вместе с Internet Обозреватель 11 (trident) и устаревшая версия Microsoft Edge (называемые "EdgeHTML") для размещения надстроек, как описано в разделе Браузеры и элементы управления веб-представления, используемые надстройками Office. Интернет-Обозреватель 11 был отключен в Windows 10 и Windows 11 в феврале 2023 г., а пользовательский интерфейс для его запуска был удален, но он по-прежнему установлен в этих операционных системах. Таким образом, Trident и другие функции из Интернета Обозреватель по-прежнему могут вызываться программными средствами Office.

Мы рекомендуем (но не требовать), чтобы вы поддерживали эти сочетания, по крайней мере в минимальном порядке, предоставляя пользователям надстройки корректное сообщение о сбое при запуске надстройки в этих веб-представлениях. Учитывайте следующие дополнительные моменты:

  • Office в Интернете больше не открывается в интернет-Обозреватель или устаревшая версия Microsoft Edge. Следовательно, AppSource не тестирует надстройки в Office в Интернете в этих браузерах.
  • AppSource по-прежнему тестирует сочетание версий платформы и классических приложений Office, использующих Trident или EdgeHTML. Однако он выдает предупреждение только в том случае, если надстройка не поддерживает эти веб-представления. Надстройка не отклоняется AppSource.
  • Средство Script Lab больше не поддерживает Trident.

Если вы планируете поддерживать более старые версии Windows и Office, надстройка должна работать во внедренных элементах управления браузера, используемых этими версиями. Например, элементы управления браузера на основе Internet Обозреватель 11 (IE11) или устаревшая версия Microsoft Edge (на основе EdgeHTML). Сведения о том, какие сочетания Windows и Office используют эти элементы управления браузера, см. в статье Браузеры и элементы управления webview, используемые надстройками Office.

Определение веб-представления, в котором выполняется надстройка во время выполнения

Надстройка может обнаружить веб-представление, в котором она работает, считывая свойство window.navigator.userAgent . Это позволяет надстройке либо предоставлять альтернативный интерфейс, либо корректно завершать сбой. Ниже приведен пример, определяющий, выполняется ли надстройка в 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 должен быть как можно раньше запуска надстройки. Ниже приведен пример домашней страницы надстройки, которая советует пользователям обновить Office при обнаружении Trident.

<!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 будет целесообразно.

С 24 июля 2023 г. все версии статьи, не относящиеся к английскому языку, устарели в той или иной степени; некоторые из них более 12 лет устарели.

С той же даты текст и таблицы в разделе Какая часть агента пользователя содержит информацию, которую вы ищете?в английской версии статьи больше не упоминание Trident или Интернет Обозреватель 11. В таблице имя и версия браузера строка для Internet Обозреватель 11 была следующей:

Двигателя Должен содержать Не должен содержать
Internet Explorer 11 Trident/7.0; .*rv:xyz

В таблице для обработчика отрисовки строка для Trident была следующей:

Двигателя Должен содержать Комментарий
Трезубец Trident/xyz Интернет-Обозреватель помещает этот фрагмент в раздел комментариев строки User-Agent.

Просмотр сведений о поддержке webview и версий Office

Чтобы получить дополнительные сведения о поддержке определенных веб-представлений и версий Office, перейдите на соответствующую вкладку.

Подсистема JavaScript, связанная с Trident, не поддерживает версии JavaScript, более поздние, чем ES5. Чтобы использовать более современные версии JavaScript или TypeScript, см. раздел Поддержка последних версий JavaScript.

Важно!

Trident не поддерживает некоторые функции HTML5, такие как мультимедиа, запись и расположение. Если надстройка должна поддерживать Trident, необходимо либо разработать надстройку, чтобы избежать этих неподдерживаемых функций, либо надстройка должна определить, когда используется Trident, и предоставить альтернативный интерфейс, который не использует неподдерживаемые функции. Дополнительные сведения см. в разделе Определение веб-представления, в котором выполняется надстройка во время выполнения.

Тестирование надстройки в Trident (интернет-Обозреватель)

См. раздел Тестирование Trident.

Поддержка последних версий JavaScript

Если вы хотите использовать синтаксис и функции версии JavaScript, которая является более новой, чем версия, поддерживаемая в веб-представлении или среде выполнения, в которой выполняется код, или вы хотите использовать TypeScript, необходимо использовать транспилер или polyfill или и то, и другое. Например, транспилер преобразует синтаксис или операторы, такие как => оператор, неизвестный в ES5, в ES5. Polyfill заменяет методы, типы и классы из более новой версии JavaScript на эквивалентные функции в более старой версии.

В следующих подразделах предполагается, что целевой стандарт JavaScript — это ES5, но информация применяется и к другим целевым объектам. Например, если целевым объектом является ECMAScript 2016, просто замените "ES5" на "ECMAScript 2016" (а "post-ES5" на "post-ECMAScript 2016") в этих подразделах.

Использование транспилера

Вы можете написать код в TypeScript или современном JavaScript, а затем транспилировать его во время сборки в ES5 JavaScript. Полученные файлы ES5 передаются в веб-приложение надстройки.

Есть два популярных транспилеров. Оба они могут работать с исходными файлами, которые являются TypeScript или JavaScript после ES5. Они также работают с файлами React (JSX и TSX).

Сведения об установке и настройке транспилировщика в проекте надстройки см. в документации по любой из них. Для автоматизации транспиляции рекомендуется использовать средство выполнения задач, например Grunt или WebPack . Пример надстройки, использующий tsc, см. в статье Надстройка Office Microsoft Graph React. Пример, в котором используется babel, см. в статье Надстройка автономного хранилища.

Примечание.

Если вы используете Visual Studio (не Visual Studio Code), tsc, вероятно, проще всего использовать. Вы можете установить поддержку для него с помощью пакета Nuget. Дополнительные сведения см. в статье JavaScript и TypeScript в Visual Studio. Чтобы использовать babel с Visual Studio, создайте скрипт сборки или используйте средство выполнения задач, Обозреватель в Visual Studio с такими инструментами, как Средство выполнения задач WebPack или Средство выполнения задач NPM.

Использование полизаполнения

Polyfill — это Более ранняя версия JavaScript, которая дублирует функциональные возможности более поздних версий JavaScript. Polyfill работает в веб-представлениях, которые не поддерживают более поздние версии JavaScript. Например, строковый метод startsWith не входил в версию JavaScript ES5, поэтому он не будет выполняться в Trident (Интернет-Обозреватель 11). Существуют библиотеки polyfill, написанные на ES5, которые определяют и реализуют startsWith метод. Рекомендуется использовать библиотеку polyfill core-js .

Чтобы использовать библиотеку polyfill, загрузите ее, как и любой другой файл или модуль JavaScript. Например, можно использовать <script> тег в HTML-файле домашней страницы надстройки (например <script src="/js/core-js.js"></script>, ) или import оператор в файле JavaScript (например, import 'core-js';). Когда обработчик JavaScript видит такой метод, как startsWith, он сначала посмотрит, есть ли метод с таким именем, встроенный в язык. Если это так, он вызовет собственный метод. Если метод не является встроенным и только если он не является встроенным, подсистема будет искать его во всех загруженных файлах. Таким образом, полизаполненные версии не используются в браузерах, поддерживающих собственную версию.

Импорт всей библиотеки core-js приведет к импорту всех функций core-js. Вы также можете импортировать только те polyfills, которые требуются надстройке Office. Инструкции о том, как это сделать, см. в разделе Api CommonJS. Библиотека core-js содержит большинство необходимых полизаполнения. Существует несколько исключений, подробно описанных в разделе Отсутствующие Polyfills документации core-js. Например, он не поддерживает fetch, но можно использовать выборку polyfill.

Пример надстройки, использующий core.js, см. в разделе Word Add-in Angular2 StyleChecker.

См. также