Office.js nullifies browser history functions breaking history usage

Question

The official version of office.js available here:

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


        

Answer 1

My Windows version is 10 Pro, default browser is Edge 42.17134.1.0 . But the right side bar where Outlook runs add-in uses the old IE10 engine ;( (IE10 as a browser also is in Windows). I don't know this is true for all Windows or it's some specific case for my version. IE10 supports history.replaceState and history.pushState, but inside Outlook I have problems with these methods, so simple restore doesn't work for me.

The simple solution with cache history.replaceState and history.pushState doesn't work fore me. In Outlook with IE10 inside I have some unexpected error when my code call history.replaceState or history.pushState. But I found one interesting thing. If suppress the error they do their work.

So my workaround is:

 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
        ....
   }

Note: I should replace history.replaceState and history.pushState before the running any code which work with this API. In my case it's react-router.