Unterstützung älterer Microsoft-Webviews und Office-Versionen

  • Artikel

Office-Add-Ins sind Webanwendungen, die in iFrames angezeigt werden, wenn sie auf Office im Web ausgeführt werden. Office-Add-Ins werden mithilfe eines eingebetteten Browsersteuerelements (auch als Webansicht bezeichnet) angezeigt, wenn sie in Office unter Windows oder Office auf dem Mac ausgeführt werden. Die eingebetteten Browsersteuerelemente werden vom Betriebssystem oder von einem Browser bereitgestellt, der auf dem Computer des Benutzers installiert ist.

Wichtig

Webviews von Internet-Explorer und Vorgängerversion von Microsoft Edge werden weiterhin in Office-Add-Ins verwendet.

Einige Kombinationen von Plattformen und Office-Versionen, einschließlich volumenlizenzierter unbefristeter Versionen über Office 2019, verwenden weiterhin die Webview-Steuerelemente, die in Internet Explorer 11 (als "Trident" bezeichnet) und Vorgängerversion von Microsoft Edge (als "EdgeHTML" bezeichnet) zum Hosten von Add-Ins verwendet werden, wie unter Browser und Webview-Steuerelemente von Office-Add-Ins erläutert. Internet Explorer 11 wurde in Windows 10 und Windows 11 im Februar 2023 deaktiviert, und die Benutzeroberfläche für den Start wurde entfernt. Sie ist jedoch weiterhin mit diesen Betriebssystemen installiert. Daher können Trident und andere Funktionen aus dem Internet Explorer weiterhin programmgesteuert von Office aufgerufen werden.

Es wird empfohlen (aber nicht erforderlich), dass Sie diese Kombinationen zumindest auf minimale Weise unterstützen, indem Sie Benutzern Ihres Add-Ins eine ordnungsgemäße Fehlermeldung bereitstellen, wenn Ihr Add-In in diesen Webviews gestartet wird. Beachten Sie diese zusätzlichen Punkte:

  • Office im Web wird nicht mehr in internet Explorer oder Vorgängerversion von Microsoft Edge geöffnet. Daher testet AppSource keine Add-Ins in Office im Web in diesen Browsern.
  • AppSource testet weiterhin auf Kombinationen von Plattform- und Office-Desktopversionen , die Trident oder EdgeHTML verwenden. Es gibt jedoch nur eine Warnung aus, wenn das Add-In diese Webansichten nicht unterstützt. Das Add-In wird von AppSource nicht abgelehnt.
  • Trident wird vom tool Script Lab nicht mehr unterstützt.

Wenn Sie ältere Versionen von Windows und Office unterstützen möchten, muss Ihr Add-In in den einbettbaren Browsersteuerelementen funktionieren, die von diesen Versionen verwendet werden. Beispiel: Browsersteuerelemente, die auf Internet Explorer 11 (IE11) oder Vorgängerversion von Microsoft Edge (EdgeHTML-basiert) basieren. Informationen dazu, welche Kombinationen von Windows und Office diese Browsersteuerelemente verwenden, finden Sie unter Browser und Webview-Steuerelemente, die von Office-Add-Ins verwendet werden.

Ermitteln der Webansicht, in der das Add-In zur Laufzeit ausgeführt wird

Ihr Add-In kann die Webansicht ermitteln, in der es ausgeführt wird, indem es die window.navigator.userAgent-Eigenschaft liest. Dadurch kann das Add-In entweder eine alternative Benutzeroberfläche bereitstellen oder ordnungsgemäß fehlschlagen. Im Folgenden finden Sie ein Beispiel, das bestimmt, ob das Add-In in Trident oder EdgeHTML ausgeführt wird.

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.
    */
}

Hinweis

Microsoft Edge (Chromium) gibt edg/ eine oder mehrere Versionsziffern und null oder mehrere . Trennzeichen als Benutzer-Agent zurück, edg/76.0.167.1z. B. . Beachten Sie, dass am e Ende des Namens nicht vorhanden ist! Es ist "edg", nicht "edge".

Dieses JavaScript sollte so früh wie möglich im Startprozess des Add-Ins sein. Es folgt ein Beispiel für eine Add-In-Startseite, die Benutzern empfiehlt, Office zu aktualisieren, wenn Trident erkannt wird.

<!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>

Wichtig

Es ist nicht immer eine bewährte Methode, die userAgent Eigenschaft zu lesen. Stellen Sie sicher, dass Sie mit dem Artikel Browsererkennung mithilfe des Benutzer-Agents vertraut sind, einschließlich der Empfehlungen und Alternativen zum Lesen userAgentvon . Wenn Sie eine alternative Add-In-Benutzeroberfläche zur Unterstützung der Verwendung von Trident bereitstellen, sollten Sie die Featureerkennung anstelle von Tests für den Benutzer-Agent verwenden. Wenn Sie jedoch nur eine Benachrichtigung bereitstellen, dass das Add-In in Trident nicht funktioniert, wie in diesem Fall, ist die Verwendung userAgent von angemessen.

Ab dem 24. Juli 2023 sind die nicht-englischen Versionen des Artikels alle in unterschiedlichem Maße veraltet; einige sind über 12 Jahre veraltet.

Ab demselben Datum, der Text und die Tabellen im Abschnitt Welcher Teil des Benutzer-Agents enthält die gesuchten Informationen? der englischen Version des Artikels nicht mehr Erwähnung Trident oder Internet Explorer 11. In der Tabelle für Browsername und -version lautete die Zeile für Internet Explorer 11 wie folgt:

Motor Muss enthalten Darf nicht enthalten
Internet Explorer 11 Trident/7.0; .*rv:xyz

In der Tabelle für die Rendering-Engine lautete die Zeile für Trident wie folgt:

Motor Muss enthalten Kommentar
Trident Trident/xyz Internet Explorer platziert dieses Fragment im Kommentarabschnitt der User-Agent Zeichenfolge.

Überprüfen von Webview- und Office-Versionsunterstützungsinformationen

Weitere Informationen zur Unterstützung bestimmter Webviews und Office-Versionen finden Sie auf der entsprechenden Registerkarte.

Die JavaScript-Engine, die Trident zugeordnet ist, unterstützt keine JavaScript-Versionen höher als ES5. Informationen zur Verwendung modernerer JavaScript-Versionen oder zur Verwendung von TypeScript finden Sie unter Unterstützung für aktuelle JavaScript-Versionen.

Wichtig

Trident unterstützt einige HTML5-Features wie Medien, Aufzeichnung und Speicherort nicht. Wenn Ihr Add-In Trident unterstützen muss, müssen Sie entweder das Add-In entwerfen, um diese nicht unterstützten Features zu vermeiden, oder das Add-In muss erkennen, wann Trident verwendet wird, und eine alternative Benutzeroberfläche bereitstellen, die die nicht unterstützten Features nicht verwendet. Weitere Informationen finden Sie unter Bestimmen der Webansicht, in der das Add-In zur Laufzeit ausgeführt wird.

Testen eines Add-Ins auf Trident (Internet Explorer)

Weitere Informationen finden Sie unter Trident-Tests.

Unterstützung für aktuelle JavaScript-Versionen

Wenn Sie die Syntax und die Features einer JavaScript-Version verwenden möchten, die neuer ist als die in der Webansicht oder Runtime unterstützte Version, in der Ihr Code ausgeführt wird, oder Sie TypeScript verwenden möchten, müssen Sie ein Transpiler oder ein Polyfill oder beides verwenden. Beispielsweise konvertiert ein Transpiler Syntax oder Operatoren, z. B. den => in ES5 unbekannten Operator, in ES5. Ein Polyfill ersetzt Methoden, Typen und Klassen aus einer neueren Version von JavaScript in entsprechende Funktionen in einer älteren Version.

In den folgenden Unterabschnitten wird davon ausgegangen, dass der JavaScript-Zielstandard ES5 ist, aber die Informationen gelten auch für andere Ziele. Wenn Ihr Ziel beispielsweise ECMAScript 2016 ist, ersetzen Sie einfach "ES5" durch "ECMAScript 2016" (und "post-ES5" durch "post-ECMAScript 2016") in diesen Unterabschnitten.

Verwenden eines Transpilers

Sie können Ihren Code entweder in TypeScript oder modernem JavaScript schreiben und ihn dann zur Buildzeit in ES5 JavaScript transpilieren. Die resultierenden ES5-Dateien laden Sie in die Webanwendung Ihres Add-Ins hoch.

Es gibt zwei beliebte Transpiler. Beide können mit Quelldateien arbeiten, die TypeScript oder Post-ES5-JavaScript sind. Sie funktionieren auch mit React-Dateien (.jsx und .tsx).

Informationen zum Installieren und Konfigurieren des Transpilers in Ihrem Add-In-Projekt finden Sie in der Dokumentation für beide. Es wird empfohlen, einen Aufgabenrunner wie Grunt oder WebPack zu verwenden, um die Transpilierung zu automatisieren. Ein Beispiel-Add-In, das tsc verwendet, finden Sie unter Office-Add-In Microsoft Graph React. Ein Beispiel, das babel verwendet, finden Sie unter Offlinespeicher-Add-In.

Hinweis

Wenn Sie Visual Studio (nicht Visual Studio Code) verwenden, ist tsc wahrscheinlich am einfachsten zu verwenden. Sie können unterstützung dafür mit einem NuGet-Paket installieren. Weitere Informationen finden Sie unter JavaScript und TypeScript in Visual Studio. Um babel mit Visual Studio zu verwenden, erstellen Sie ein Buildskript, oder verwenden Sie den Task Runner Explorer in Visual Studio mit Tools wie dem WebPack Task Runner oder npm Task Runner.

Verwenden eines Polyfills

Ein Polyfill ist JavaScript einer früheren Version, das Funktionen aus neueren JavaScript-Versionen dupliziert. Polyfill funktioniert in Webansichten, die die höheren JavaScript-Versionen nicht unterstützen. Beispielsweise war die Zeichenfolgenmethode startsWith nicht Teil der ES5-Version von JavaScript und wird daher nicht in Trident (Internet Explorer 11) ausgeführt. Es gibt Polyfill-Bibliotheken, die in ES5 geschrieben sind, die eine startsWith Methode definieren und implementieren. Wir empfehlen die polyfill-Bibliothek core-js .

Um eine Polyfill-Bibliothek zu verwenden, laden Sie sie wie jede andere JavaScript-Datei oder jedes andere JavaScript-Modul. Sie können beispielsweise ein <script> Tag in der HTML-Datei der Startseite des Add-Ins verwenden (z. B <script src="/js/core-js.js"></script>. ), oder Sie können eine import -Anweisung in einer JavaScript-Datei verwenden (z. B import 'core-js';. ). Wenn die JavaScript-Engine eine Methode wie startsWithsieht, wird zuerst überprüft, ob eine Methode dieses Namens in die Sprache integriert ist. Falls vorhanden, wird die native Methode aufgerufen. Wenn und nur wenn die Methode nicht integriert ist, sucht die Engine in allen geladenen Dateien danach. Daher wird die polyfilled-Version nicht in Browsern verwendet, die die native Version unterstützen.

Beim Importieren der gesamten core-js-Bibliothek werden alle Core-js-Features importiert. Sie können auch nur die Polyfills importieren, die Für Ihr Office-Add-In erforderlich sind. Anweisungen dazu finden Sie unter CommonJS-APIs. Die core-js-Bibliothek enthält die meisten Polyfills, die Sie benötigen. Es gibt einige Ausnahmen, die im Abschnitt Fehlende Polyfills der core-js-Dokumentation beschrieben sind. Beispielsweise wird nicht unterstütztfetch, aber Sie können den Fetch-Polyfill verwenden.

Ein Beispiel-Add-In, das core.js verwendet, finden Sie unter Word Add-In Angular2 StyleChecker.

Siehe auch