修复由 office.js 删除的 history.pushState 的最佳做法是什么？答案

【问题标题】：What's the best practice to fix history.pushState which is deleted by office.js?修复由 office.js 删除的 history.pushState 的最佳做法是什么？
【发布时间】：2019-10-23 13:22:41
【问题描述】：

我们的团队想要构建一个可以在浏览器和 Excel 插件中打开的文档网站。我们选择Docusaurus V2作为构建文档网站的主要框架，并在其中嵌入了office.js。

Office.js 在加载后删除history.pushState 和history.replaceState API，所以我添加了一些JS代码来填充它，如下：

<html>
  <head>
    ... ...
    <script type="text/javascript">
      if (history) {
        var pushStateRef = history.pushState;
        var replaceStateRef = history.replaceState;
      }
      function patch() {
        if (history && !history.pushState) {
          history.pushState = pushStateRef;
          history.replaceState = replaceStateRef;
        }
      }
      function onOfficejsLoad() {
        Office.onReady(function() {
          console.log('office.js is ready.');
          patch();
        });
      }
    </script>
    <script
      type="text/javascript"
      src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"
      onload="onOfficejsLoad();"
    ></script>
  </head>
</html>

以上代码使该网站能够在 Chrome、Safari 以及 IE 11 中的 Excel Online 插件中正常运行。但是，它在 Excel for Windows 中效果不佳：当我们单击触发路由器事件时，例如点击 docusaurus 的侧边栏，出现错误，路由器没有效果，侧边栏也不好用（见Screenshot）。

我设法通过添加history.js 的加载来修复此错误：

<html>
  <head>
    ... ...
    <script
      type="text/javascript"
      src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"
      onload="onOfficejsLoad();"
    ></script>
    <script
      nomodule
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/html5-history-api/4.2.10/history.js"
    ></script>
  </head>
</html>

我仍然发布问题，因为我不明白为什么以前的版本确实可以在 Excel Online IE 11 中使用我们的插件，但在 Excel for Windows 中却不行，它们的行为不应该相同吗？最重要的是，在开发 Excel 插件时，是否有任何最佳实践可以遵循来管理 history.pushState 和 office.js 的冲突？

【问题讨论】：

标签： ms-office office-js html5-history history.js docusaurus

【解决方案1】：

我添加了一些 JS 代码来填充它

我认为你所做的就是我也会做的。我不认为 Office.js 删除/覆盖历史记录方法是正确的，但也许他们有充分的理由这样做（例如，只允许整页刷新）。

但是，它在 Excel for Windows 中效果不佳

您知道 Excel for Windows 中使用的是什么浏览器吗？它可能是一个完全不同的浏览器，不符合标准/在不同的环境中运行（例如，并非所有 HTML5 API 都在 window 对象上提供）。这可能就是为什么会有奇怪的行为。

抱歉，我没有可以调试此问题的 Windows 机器。

【讨论】：

Office桌面的不同版本有Edge Chromium、Edge legacy、IE 11三种选择。主要是 IE 11。