Office.js nullifies browser history functions brea

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.

Answer 1

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.

Answer 2

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>