Office.js使浏览器历史功能无效，破坏了历史记录的使用。

Question

office.js的官方版本在这里可用：

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

它在代码中包含以下行：

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

这破坏了我在 Excel Add-ins 中一些历史功能（我使用 react 和 react-router）。

为什么 office.js 要使这些历史函数无效？文档中没有任何解释。

- Marcin Belczewski

---

让我跟团队跟进一下这个事情。 - Michael Zlatkovsky - Microsoft

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>

- stepper

---

谢谢！适用于Vue 2.6.12和vue-router 3.4.8。 - LTanase

在Angular 16中使用msal-angular 3.0.0可以工作。但是当你不再需要它们时，你应该调用delete windows._historyCache.replaceState和delete windows._historyCache.puschState。 - JimbobTheSailor

Answer 2

Excel中使用的浏览器控件不支持历史记录API，如果replaceState和pushState没有被清空，则它们将对React可用，但每次调用时都会抛出异常。在新的浏览器控件可用之前，您需要切换到基于哈希的路由或使用History API的polyfill。https://github.com/devote/HTML5-History-API似乎可以正常工作，如果您在office.js之后包含脚本引用。

- Dan Saunders - MSFT

---

此外，我们将讨论在平台/框架层面上是否有更长期的解决方案。但是，填充程序可能是您最好的短期解决方案。 - Michael Zlatkovsky - Microsoft

嗨@MichaelZlatkovsky-Microsoft，针对所有Add-in主机和平台，是否有不支持的浏览器API列表/参考资料？ - Craig Sketchley

嗨，@MichaelZlatkovsky-Microsoft，添加history.js会给我的应用程序带来一些麻烦，最近的一个问题是this。因此，似乎我必须禁用html5mode，因此不需要在我的应用程序中使用history.js。您对于关于html5mode的office.js有任何更新吗？ - SoftTimur

抱歉，没有更新。在当前基础设施下，我们最多只能将类似于这个的 polyfills 与 Office.js 捆绑在一起，但听起来它实际上在任何情况下都无法解决您的问题。 - Michael Zlatkovsky - Microsoft

六年后，根据@Dan Saunders - MSFT的评论，Excel现在使用最新的浏览器来处理任务窗格，并且根据stepper所接受的答案，恢复浏览器历史不会导致我在最新的Office 365 Excel中发现任何问题。然而，我尚未尝试在我的插件中对浏览器历史进行任何操作。但是，如果我不恢复它，我会在Angular 16和msal-angular 3.0.0-beta中遇到无尽的路由问题。 - JimbobTheSailor

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 对我无效。在Outlook中，使用IE10时，当我的代码调用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。

- vyaz