CODEWITHSUNDEEP
office-js
M Polak
M Polak

Reputation: 867

window.addEventListener does not work in Word Add-in when called from manifest command (IE11/Edge)

I'm developing a Word Add-in and using "ExecuteFunction" to trigger a local storage update. I then have a listener on the window object listening to local storage changes.

The function is triggered and the local storage is updated. However, the event listener is not triggered in the desktop version of Word on Windows.

In the function file (i.e. "FunctionFile" in the manifest), the code is:

(() => {
    Office.initialize = () => {
        window['logout'] = (event: Office.AddinCommands.Event) => {
            const localStorageKey = 'local-storage-key';
            let localStorageData = localStorage.getItem(localStorageKey);

            if (localStorageData) {
                localStorageData = JSON.parse(localStorageData);
                localStorageData['isLoggedOut'] = true;
                localStorage.setItem(localStorageKey , JSON.stringify(localStorageData));
            }
            event.completed();
        };
    };
})();

Then in the entry point for the app, the code is:

window.addEventListener('load', () => {
    window.addEventListener('storage', () => {
        try {
            const localStorageKey = 'local-storage-key';
            const localStorageState = localStorage.getItem(localStorageKey);

            // perform some action on local storage update

        } catch (error) {
            console.log(error);
        }
    });
});

The code works on Word Online, as well as on the Mac version of Word. It does not work in the desktop version of Word on Windows - the logout function is executed, but the storage event listener is never triggered.

I suspect that the window event listener is not working properly in IE11/Edge - for instance, the app's iframe might not pick up the event triggered by the function file's iframe, or something to that effect.

Is there an alternative/better way to communicate a command executed by a function in the manifest file and the application?

Thanks,

Morgan

Upvotes: 1

Views: 509

Answers (1)

Cadu
Cadu

Reputation: 11

I had a similar problem today with IE11. The workaround for me was to make a polling in tab 1 with setInterval(function() {...}, 1000) to detect a localStorage.setItem(...) made in tab 2. After each unsuccessful iteration with no expected localStorage.getItem(...), make a localStorage.clear() inside {...}. Finally, remember to call clearInterval(...) on successful iteration. An example:

In tab 1:

let ua = window.navigator.userAgent;
if (ua.indexOf("MSIE ") != -1 || ua.indexOf('Trident/') != -1 || ua.indexOf('Edge/') != -1) {
    let interval = setInterval(function() {
        checkStorage({ key: "your-local-storage-item-key-set-in-tab-2" }, interval);
        localStorage.clear();
    }, 1000);
} else {
    window.addEventListener("storage", checkStorage);
}
// ...
function checkStorage(event, interval = null) {
    if (event.key == "your-local-storage-item-key-set-in-tab-2") {
        // ...
        let value = localStorage.getItem("your-local-storage-item-key-set-in-tab-2");
        // ...
        if (value) { // or... value == "expected-value"
            // ...
            if (interval) clearInterval(interval);
        }
    }
}

In tab 2:

// ...
localStorage.setItem("your-local-storage-item-key-set-in-tab-2", "any-value");
// ...

Upvotes: 1

Related Questions