Office.js使浏览器历史记录功能无效，从而破坏历史记录使

Question

office.js的官方版本可在此处获得：

https://appsforoffice.microsoft.com/lib/1/hosted/office.js

它在代码中包含以下行：

window.history.replaceState = null;
window.history.pushState = null;

这打破了我的Excel加载项中的一些历史功能（我正在使用react和react-router）

为什么office.js会使这些历史记录功能无效？我在文档中找不到任何解释。

Answer 1

Excel中使用的浏览器控件不支持History API，如果未对replaceState和pushState进行排序，则它们可以作出反应但在调用时始终抛出异常。在新的浏览器控件可用之前，您需要切换到基于散列的路由或使用填充历史API。如果在office.js之后包含脚本引用，https://github.com/devote/HTML5-History-API似乎可以工作。

Answer 2

这对我有用 - 在office-js删除之前缓存对象：

<script type="text/javascript">
    // Office js deletes window.history.pushState and window.history.replaceState. Cache them and restore them
    window._historyCache = {
        replaceState: window.history.replaceState,
        pushState: window.history.pushState
    };
</script>

<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

<script type="text/javascript">
    // Office js deletes window.history.pushState and window.history.replaceState. Restore them
    window.history.replaceState = window._historyCache.replaceState;
    window.history.pushState = window._historyCache.pushState;
</script>

Answer 3

我的Windows版本是10 Pro，默认浏览器是Edge 42.17134.1.0。但Outlook运行加载项的右侧栏使用旧的IE10引擎;（（IE10作为浏览器也在Windows中）。我不知道所有Windows都是如此，或者是我的版本的某些特定情况.IE10 supports history.replaceState和history.pushState，但在Outlook中我遇到了这些方法的问题，所以简单的恢复对我来说不起作用。

使用缓存history.replaceState和history.pushState的简单解决方案对我不起作用。在IE10里面的Outlook中，当我的代码调用history.replaceState或history.pushState时，我有一些意想不到的错误。但我发现了一件有趣的事情。如果抑制错误，他们就会开展工作。

所以我的解决方法是：

 function isIE10 () {
      return !!document.documentMode
    }

    // Office js deletes window.history.pushState and window.history.replaceState. Cache them and restore them
    // Also there is an issue in Windows Outlook with `pushState` and `replaceState`. They throw an error but in the same time do their expected work
    // So I suppress errors for IE10 (we use it inside Window Outlook)
    window._historyCache = {
      replaceState: function (originalReplaceState) {
        return function () {
          try {
            return originalReplaceState.apply(window.history, arguments)
          } catch (e) {
            if (isIE10()) {
              console.warn("Unexpected error in 'window.history.replaceState', but we can continue to work :)");
              return false;
            }
            throw(e);
          }
        }
      }(window.history.replaceState),
      pushState: function (originalFunction) {
        return function () {
          try {
            return originalFunction.apply(window.history, arguments)
          } catch (e) {
            if (isIE10()) {
              console.warn("Unexpected error in 'window.history.pushState', but we can continue to work :)");
              return false;
            }
            throw(e);
          }
        }
      }(window.history.pushState)
    };

      // In Window Outlook we have issue with 'replaceState' and 'pushState. So replaced it by wrapped version.
      window.history.replaceState = window._historyCache.replaceState;
      window.history.pushState = window._historyCache.pushState;

//include the main code with react-router
//include Office.js


   Office.initialize = function () {

    // Office js deletes window.history.pushState and window.history.replaceState. Restore them
    window.history.replaceState = window._historyCache.replaceState;
    window.history.pushState = window._historyCache.pushState;

    // Now you can start initialize&&run your application
        ....
   }

注意：在运行使用此API的任何代码之前，我应该替换history.replaceState和history.pushState。在我的情况下，它是react-router。