开发Office插件，需要AppsForOffice CDN回退

Question

我正在为 Office 加载项完成 JS 和 CSS 加载，需要为 Office CDN 编写回退。我有一个适用于 jQuery 的应用程序，但我不知道如果没有加载 AppsForOffice 文件要检查什么。我需要测试什么对象？我四处搜索，但没有找到此 CDN 的任何示例代码。

jQuery 示例（有效）

<!-- jQuery CDN and fallback -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
</script>
<script>window.jQuery || document.write('<script src="../../Scripts/jquery-3.3.1.min.js">\x3C/script>')</script>

AppsForOffice 示例（不起作用）

<!-- Office CDN and fallback -->
<link rel="preconnect" href="https://appsforoffice.microsoft.com">
<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css">
<script>
    window.Office ||
        document.write('<script src="../../Scripts/Office/1/office.js">\x3C/script>')
    document.write('<link rel = "stylesheet" href = "../../Content/fabric.min.css" />')
 document.write('<link rel="stylesheet" href="../../Content/fabric.components.min.css" />')
</script>

如前所述，我需要测试什么对象？

Answer 1

我查看了调用的 .js 库，发现文件返回的不是 Office，而是 OSF 对象，因此更改了回退代码如下。在 Chrome 的审计功能中验证。

这是使用 Ouroborus 的答案，修改以加载 Office 所需的所有部分，以及检测 Web 和桌面之间差异的代码。根据您的需要，您可能需要加载不同的语言包或不同的 web/win32 版本。

<!--
    Office CDN and fallback
    CSS and JS are copies of referenced CDN's
    If the CDN's change, the fallbacks must change'
-->
<link rel="preconnect" href="https://appsforoffice.microsoft.com">
<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<script>
    if (!window.OSF) {
        document.write('<script src="../../Scripts/Office/1/office.js">\x3C/script>');

        if (location.search === "?et=") {
            document.write('<script src="../../Scripts/Office/1/outlook-web-16.01.js">\x3C/script>');
        } else {
            document.write('<script src="../../Scripts/Office/1/outlook-win32-16.01.js">\x3C/script>');
        }

        document.write('<script src="../../Scripts/Office/1/en-us/office_strings.js">\x3C/script>');
        document.write('<script src="../../Scripts/Office/1/en-us/outlook_strings.js">\x3C/script>');
        document.write('<link rel="stylesheet" href="../../Content/fabric.min.2.6.1.css" type="text/css" />');
        document.write('<link rel="stylesheet" href="../../Content/fabric.components.2.6.1.min.css" type="text/css"  />');
        document.write('<script src="../../Scripts/Office/MicrosoftAjax.js">\x3C/script>');
    } else {
        document.write('<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.min.css" />');
        document.write('<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css" />');
    }
</script>

离开这里是为了帮助其他可能有类似问题的人。

Answer 2

对象是 window.OSF（或只是 OSF）。这可以通过检查 office.js.

来确定

您还需要更改以下代码：

window.Office ||
document.write('<script src="../../Scripts/Office/1/office.js">\x3C/script>')
document.write('<link rel = "stylesheet" href = "../../Content/fabric.min.css" />')
document.write('<link rel="stylesheet" href="../../Content/fabric.components.min.css" />')

类似于：

if(!window.OSF) {
    document.write('<script src="../../Scripts/Office/1/office.js">\x3C/script>');
    document.write('<link rel="stylesheet" href="../../Content/fabric.min.css" />');
    document.write('<link rel="stylesheet" href="../../Content/fabric.components.min.css" />');
}

以便后备功能按预期运行。

开发Office插件，需要AppsForOffice CDN回退

Developing Office Add-in, Need Fallback for AppsForOffice CDN

javascript

outlook

fallback

cdn

office365