从清单命令 (IE11/Edge) 调用时，window.addEventListener 在 Word 插件中不起作用 [英] window.addEventListener does not work in Word Add-in when called from manifest command (IE11/Edge)

问题描述

我正在开发 Word 插件并使用ExecuteFunction"来触发本地存储更新.然后我在 window 对象上有一个监听器，监听本地存储的变化.

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.

触发函数，更新本地存储.但是，Windows 桌面版 Word 中不会触发事件侦听器.

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.

在函数文件中(即manifest中的FunctionFile")，代码为:

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);
        }
    });
});

该代码适用于 Word Online 以及 Mac 版本的 Word.它在 Windows 上的 Word 桌面版本中不起作用 - logout 函数被执行，但 storage 事件侦听器永远不会被触发.

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.

我怀疑窗口事件侦听器在 IE11/Edge 中无法正常工作 - 例如，应用程序的 iframe 可能无法接收由函数文件的 iframe 触发的事件，或类似的东西.

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?

谢谢，

摩根

推荐答案

我今天在使用 IE11 时遇到了类似的问题.我的解决方法是在选项卡 1 中使用 setInterval(function() {...}, 1000) 进行轮询，以检测选项卡 2 中的 localStorage.setItem(...).在每次不成功的迭代之后，没有预期的 localStorage.getItem(...)，在 {...} 内创建一个 localStorage.clear().最后，记得在成功迭代时调用 clearInterval(...).一个例子:

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:

在标签 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);
        }
    }
}

在标签 2 中:

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

这篇关于从清单命令 (IE11/Edge) 调用时，window.addEventListener 在 Word 插件中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！