Unable to use window.history.replaceState function in Mail Addin

问题

I have created a SPA mail add-in for outlook365 using durandal framework and using Office365 JavaScript API(office.js). Somewhere in my application I want to use window.history.replaceState function but this function is set explicitly null in office.js causing the error.

//following lines are presents in Office.js
window.history.replaceState = null;
window.history.pushState = null;

回答1:

There are certain functions that Microsoft doesn't support within Office Add Ins (Alert being another one). Certainly looks like they've deliberately disabled that one.

回答2:

if you are using react-router with office.js, you will get "windows.history .pushState is not a function" error and all routes fails. what you can do is to add following code at bottom of html page to fall back to window.location.hash:

if (typeof(window.history.pushState) !== 'function') {
    window.history.pushState = function(path){
       window.location.hash = '#!' + path;
    }
}

post this in case of someone run into same issue.

回答3:

I have overridden this behaviour by doing the following

<script>
  var pushStateRef = history.pushState;
  var replaceStateRef = history.replaceState;
</script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>
<script>
  history.pushState = pushStateRef;
  history.replaceState = replaceStateRef;
  delete pushStateRef;
  delete replaceStateRef;
</script>

Assuming you only support browsers that support history, this should undo the Office.js nullifying.

I have also opened an issue @ Office.js repository: https://github.com/OfficeDev/office-js/issues/429

回答4:

I found a simple solution, react-router works fine after this change. We can backup the functions before Office.js nullifies them in index.html, and then restore:

<script>
  window.backupHistoryFunctions = {};
  window.backupHistoryFunctions.pushState = window.history.pushState;
  window.backupHistoryFunctions.replaceState = window.history.replaceState;
</script>
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js">
</script>
<script>      
  window.history.pushState = window.backupHistoryFunctions.pushState;
  window.history.replaceState = window.backupHistoryFunctions.replaceState;
  console.log(window.history.replaceState)
</script>

As the Microsoft rep notes, this would be incompatible with Excel, but I guess it'd be fine for a mail add-in.

来源：https://stackoverflow.com/questions/33954663/unable-to-use-window-history-replacestate-function-in-mail-addin

标签

office-js