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库，发现该文件返回了OSF对象，而不是Office，因此更改了备用代码，如下所示。在Chrome的审核功能中得到验证。

这是使用Ouroborus的答案，并进行了修改，以加载Office所需的所有组件，以及用于检测Web和桌面之间差异的代码。根据您的需要，您可能需要加载其他语言包或其他Web / win32版本。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>

<body>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class='nav-item'>
      <a class='nav-link active' data-toggle='tab' href='#1'>12</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A2'>13</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A3'>16</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A4'>17</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A5'>18</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A6'>19</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class='tab-pane container fade in show active' id='A1'>1</div>
    <div class='tab-pane container fade' id='A2'>2</div>
    <div class='tab-pane container fade' id='A3'>3</div>
    <div class='tab-pane container fade' id='A4'>4</div>
    <div class='tab-pane container fade' id='A5'>5</div>
    <div class='tab-pane container fade' id='A6'>6</div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

</html>

离开这里为其他可能遇到类似问题的人提供帮助。

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的后备

2 个答案: