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

It contains the following lines in code:

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

This breaks some of the history functionality in my Excel Add-ins (I'm using react and react-router)

Why is office.js nullifying those history functions? I cannot find any explanation in the documentation.

Let me follow up on that with the team – Michael Zlatkovsky - Microsoft Mar 07 '17 at 16:58 — Michael Zlatkovsky - Microsoft, Mar 07 '17 at 16:58

score 20 · Answer 1 · answered Dec 07 '18 at 03:16

This works for me - cache the objects before office-js deletes them:

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

Works in Angular 16 with msal-angular 3.0.0. But you should call delete windows._historyCache.replaceState and delete windows._historyCache.puschState when you no longer need them — JimbobTheSailor, Aug 07 '23 at 00:59

score 9 · Answer 2 · answered Mar 09 '17 at 19:00

9

The browser control used in Excel does not support History API, if replaceState and pushState were not nulled out they would be available to react but always throw an exception when called. Until a new browser control is available, you will need to switch to hash based routing or use a polyfill for History API. https://github.com/devote/HTML5-History-API seems to work if you include the script reference after office.js.

answered Mar 09 '17 at 19:00

Dan Saunders - MSFT

191
2

1

To add to that: will discuss if there is a longer-term fix for this at the platform/framework level. But the polyfill is likely your best short-term solution. – Michael Zlatkovsky - Microsoft Mar 09 '17 at 19:21
1

Hey @MichaelZlatkovsky-Microsoft, is there a list/reference of unsupported browser APIs for all Add-in hosts and platforms? – Craig Sketchley Nov 23 '17 at 23:33
Hi @MichaelZlatkovsky-Microsoft , adding history.js gives several troubles to my app, the recent one is [this](https://stackoverflow.com/questions/48042888/office-initialize-raises-rootscopeinfdig). So it seems that i have to disable html5mode and thus not need to use history.js in my app. Do you have any update about office.js with regard to html5mode? – SoftTimur Dec 31 '17 at 20:44
No updates, sorry. Under the current infrastructure, the most we could do would simply be to bundle a polyfills like this one with Office.js, but it sounds like it wouldn't actually solve your problem in either case. – Michael Zlatkovsky - Microsoft Jan 01 '18 at 00:40
Six years after @Dan Saunders - MSFT comment, Excel now uses latest browsers for the Taskpane and restoring the browser history as per the accepted answer by stepper does not cause any problems that I have found in latest Office 365 Excel. I have, however, not tried to do anything with the browser history in my addin. But if I do not restore it i get endless routing issues with Angular 16 and msal-angular 3.0.0-beta – JimbobTheSailor Aug 07 '23 at 01:06

score 1 · Answer 3 · answered Apr 09 '19 at 15:06

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.

Office.js nullifies browser history functions breaking history usage

3 Answers3

Linked