需要从 CustomTab Word Web 插件控制 TaskPane

Question

我正在开发一个带有 CustomTab 和 TaskPane 的 Word Web 插件。 从 Manifest.xml 文件中，我通过 ExecuteFunction 触发 JavaScript 函数的事件 JS 函数被命中，但 TaskPane UI 上没有更新

Manifest.xml

<FunctionFile resid="Contoso.FunctionFile.Url" />
<bt:Urls>
    <bt:Url id="Contoso.FunctionFile.Url" DefaultValue="~remoteAppUrl/Home.html" />
</bt:Urls>
<Action xsi:type="ExecuteFunction">
    <FunctionName>appendText</FunctionName>
</Action>

JavaScript

function appendText() {
    var count = 10;
    $("#main").append(count);
}

HTML

<div style="width:100%" id="main"></div>

相同的 JQuery 函数在正常的按钮单击函数调用中工作，该函数调用存在于 TaskPane 中。

如何触发应该正确执行的事件？

Answer 1

函数文件 HTML 和它调用的 JavaScript 文件在与任务窗格完全分开的执行上下文中运行。如果我了解您所做的，您已将 home.html 设置为 FunctionFile 作为任务窗格主页。如果你这样做，当调用 FunctionFile 时，你将加载 home.html 的 第二个副本，（我认为第二个副本将是不可见的，因为函数文件从不显示 UI）。您的 append 方法正在处理页面的第二个实例，而不是任务窗格中的实例。

我能想到的从函数文件（应该是无 UI 页面）到任务窗格的最佳方式是使用 LocalStorage。您的 appendText 方法应使用诸如“count”之类的键将值“10”存储在 LocalStorage 中。任务窗格中的 JavaScript 需要从 LocalStorage 中读取“count”并将其值附加到 #main。

如果您需要自动执行此操作，则任务窗格中检查 LocalStorage 中“计数”的代码应在定时循环中运行。

2018 年 6 月 16 日更新： 回应OP的评论： 这里有两种不同的执行上下文在起作用；也就是说，Internet Explorer 及其嵌入式 JavaScript 引擎的两个不同实例：

首先，任务窗格有一个主页 home.html。它有一个 UI 并加载 JavaScript。

其次，有由功能区按钮启动的 FunctionFile.html。这应该是一个不同于任务窗格主页的 HTML 页面。这个页面应该没有 UI；正文中没有可见的 HTML 元素。它应该加载 JavaScript。这应该是与任务窗格主页加载的不同的 JS 文件。您不想加载同一文件的两个副本。调用此页面时，不会打开任何 IE 窗口或任务窗格。它从未见过。

这两个 IE 实例互不相识。它们只能通过写入和读取机器的本地存储来进行通信。因此，如果您希望通过自定义选项卡上的按钮调用的 JavaScript 更改任务窗格中页面中的 DOM 元素，您只能通过 LocalStorage 传递信号来实现。

FunctionFile.html 加载的 JavaScript 应该将“count”值存储在 LocalStorage 中，什么也不做。此文件中的 JavaScript 无法处理主页中的 DOM 元素，因为该 DOM 位于完全不同的 IE 实例中。

主页加载的 JavaScript 应该从 LocalStorage 读取“count”值并将其附加到主页 DOM 中的 #main 元素。

因此，写入 LocalStorage 的 JavaScript 和读取 LocalStorage 的 JavaScript 在不同的函数中，在不同的 JavaScript 文件中，在不同的 IE 实例中运行。

如果您还没有，请查看Add-in Commands 和Step 6 of Excel tutorial。