Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Router with Office.js: router tries using push state even tho it's reset manually by the office js script #3154

Closed
Mafii opened this issue Mar 23, 2020 · 2 comments

Comments

@Mafii
Copy link

@Mafii Mafii commented Mar 23, 2020

What problem does this feature solve?

When using Microsofts Offic.js (e.g. in Word: https://docs.microsoft.com/en-us/javascript/api/word?view=word-js-preview), and using Vue with vue router, the router tries using push state, but the office js script deletes the push state since the excel web pane is not supporting the push state. The check in push state wheter push state can be used, checks for window.history && 'pushState' in window.history, but office.js resets the fields on window.history, not window.history itself (see https://stackoverflow.com/a/42703406/). I propose we check if Office.js is available in the context, and if so, we disable the push state.

What does the proposed API look like?

We would add a check at this position:

ua.indexOf('Windows Phone') === -1

The additional check could look like this:

const officeJsLoaded = window.Office && window.Office.context;

so the whole function might look like this:

export const supportsPushState =
  inBrowser &&
  (function () {
    const ua = window.navigator.userAgent
    const officeJsLoaded = window.Office && window.Office.context

    if (
      officeJsLoaded ||
      ((ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
      ua.indexOf('Mobile Safari') !== -1 &&
      ua.indexOf('Chrome') === -1 &&
      ua.indexOf('Windows Phone') === -1)
    ) {
      return false
    }

    return window.history && 'pushState' in window.history
  })()

Alternatively, we could check if window.history.pushState is null, but I am not sure of the implications of this. Maybe someone who knows the expected state in the browsers can shed a light wheter that would make sense.

This would result in this return statement, the rest of the function not being changed:

return window.history && 'pushState' in window.history && window.history.pushState !== null
@posva

This comment has been minimized.

Copy link
Member

@posva posva commented Mar 23, 2020

I think checking for history.pushState to be a function should be enough

@Mafii

This comment has been minimized.

Copy link
Author

@Mafii Mafii commented Mar 23, 2020

I found a workaround so vue router doesn't have to be changed:

Before importing vue router, add the following lines:

delete window.history.pushState; // workaround to make sure vue router doesn't try using pushState
delete window.history.replaceState; // workaround to make sure vue router doesn't try using replaceState

Then, import vue router and init it, before initializing office.js.
Seems to work for me.

@posva posva closed this in bc41f67 Mar 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.