javascript - 加载项行为多个打开的 Word 文档

Question

发现问题!我擦洗了 stackoverflow，发现:this .这似乎是问题所在。 Browsersync 有导致这些问题发生的有趣行为。所以我的新问题是:如何在没有浏览器同步的情况下部署 word 插件？我已经尝试分别在 app.ts 和 app.js 上直接运行 tsc 和 node，但这只会给我一个错误: ReferenceError: Office 未定义

---

我是开发 Office 插件的新手。当我打开一个文档时，我有一个插件可以工作。如果我打开了多个文档，我期望的行为是加载项的功能在启动时应仅应用于焦点文档。

这实际上并没有发生。我做了多次测试，并不能完全弄清楚发生了什么。有时，在第二个打开的文档的加载项窗口中按下按钮将对第一个打开的文档执行操作。有时，在第二个。

编辑:这是一个最小的工作示例:

(function () {

    // The initialize function is run each time the page is loaded.
    Office.initialize = function (reason) {
        $(document).ready(function () {

            // Use this to check whether the API is supported in the Word client.
            if (Office.context.requirements.isSetSupported('WordApi', 1.1)) {
                // Do something that is only available via the new APIs
                $('#clear').click(clearHighlighting);
                $('#supportedVersion').html('This code is using Word 2016 or greater.');
            } else {
                // Just letting you know that this code will not work with your version of Word.
                $('#supportedVersion').html('This code requires Word 2016 or greater.');
            }
        });
    };

    var highlighted = [];

    function clearHighlighting() {
        Word.run(function (context) {
            console.log("clearing highlighting");
            document.getElementById("status").innerHTML = "";
            var body = context.document.body;
            body.font.highlightColor = null;
            return context.sync();

        }).catch(function (error) {
            console.log('Error: ' + JSON.stringify(error));
            if (error instanceof OfficeExtension.Error) {
                console.log('Debug info: ' + JSON.stringify(error.debugInfo));
            }
        });
    };
});

1. 我的问题是，在这种情况下， 预期的行为是什么？
2. 如何限制对焦点文档的操作？
3. 是否为每个打开的文档复制了加载项的元素？如果不是，更改插件的 div 中的文本可能与焦点文档相关，也可能不相关。

编辑 2

我观察到的行为是，任何使用加载项任务 Pane 打开的文档都将调用该函数，无论我实际单击哪个任务 Pane 按钮。

控制台显示该函数被调用一次(从 console.log 语句)，但文件被全部修改。

我正在将 Office.document.url 打印到控制台。如果我将调试器附加到 Doc A，并按下 Doc A 中的加载项按钮，我将看到控制台仅记录 Doc B 的 url，但 Doc A 和 Doc B 的状态 div 将显示它们各自的 URL。

  console.log("clearing highlighting"+Office.context.document.url);
  document.getElementById("status").innerHTML = Office.context.document.url;

在上面的代码片段中，第一行只在第二个文档的控制台中显示一次(即使在第一个中单击了按钮)，第二行在两个文档中执行了该操作。需要注意的是，调试器附在第二个文档中。

编辑:我将所有代码重构为一个新的 TypeScript 插件。我观察到相同的行为。所有打开的文档都会受到影响:

(() => {
// The initialize function must be run each time a new page is loaded 
 Office.initialize = (reason) => {
  $(document).ready(() => {
 (window as any).Promise = OfficeExtension.Promise;
  $('#clear').click(clearHighlighting);
 });
};

async function clearHighlighting() {

await Word.run(async (context) => {
  console.log("clearing highlighting"+Office.context.document.url);
  document.getElementById("status").innerHTML = Office.context.document.url;
  var body = context.document.body;
  body.font.highlightColor = null;

  await context.sync();
});

}
})();

Answer 1

我正式是个白痴。

我调试的时间太长了。以下是调查结果。

1. 这确实是 browsersync 的问题。此行为仅在测试时出现，这就是为什么那些试图重现此行为的人无法重现的原因。

2. 部署此代码就像将其放入网络服务器一样简单。由于它都是客户端代码，因此任何 Web 服务器都可以(无需对 node.js 大惊小怪)。

感谢大家的帮助。

如果其他人遇到此问题，this post直观地解释它。