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

这对我有用 - 在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 2

excel中使用的浏览器控件不支持历史记录API，如果替换和推动板未删除，则可以进行反应，但在调用时始终会引发例外。在新的浏览器控件可用之前，您需要切换到基于哈希的路由或为历史记录API使用polyfill。https://github.com/devote/html5-history-api，如果您在Office.js.js.

Answer 3

我的Windows版本是10个Pro，默认浏览器为边缘42.17134.1.0。但是右侧栏的Outlook运行加载项使用旧的IE10引擎;（（IE10作为浏览器也在Windows中）。我不知道所有Windows对我的版本都是正确的，或者是我版本的某些特定情况。支持history.replaceState和history.pushState，但是Inside Outlook我对这些方法有问题，因此简单还原对我不起作用。

使用CACHE 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。就我而言，这是反应。