Excel Javascript 插件：如何在任务窗格中打开 ExecuteFunction 而不是新的 iframe？

Question

我正在尝试使用 Excel Javascript API 创建一个插件：

• 在主页选项卡上添加多个按钮。
• 每个按钮都会将任务窗格打开到不同的屏幕。
• 这些任务窗格中的每一个都在相同的运行时中运行（例如，我只需在 中设置数据即可在它们之间共享数据window.data = "data"）。

据我所知，不可能ShowTaskpane通过按钮上的多个操作来做到这一点，因为这似乎不适用于共享运行时。

我目前采取的方法是：

1. 将我的函数文件设置为

<FunctionFile resid="Taskpane.Url"/>

（其中<bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>）

2. 定义以下操作：

<Control xsi:type="Button" id="FirstButton">
    ...
    <Action xsi:type="ExecuteFunction">
        <FunctionName>first</FunctionName>
    </Action>
</Control>
<Control xsi:type="Button" id="SecondButton">
    ...
    <Action xsi:type="ExecuteFunction">
        <FunctionName>second</FunctionName>
    </Action>
</Control>

3. 在全局范围内定义first和second作为函数（并在taskpane.html文件中定义）。这些函数中的每一个 a) 在 Taskpane 应用程序中设置一些状态（以使其显示不同的内容，具体取决于函数调用），然后调用Office.addin.showAsTaskpane(). 代码大致如下：

但是，这不会按预期工作。也就是说，它在任务窗格一侧的单独 iframe 中打开任务窗格。它看起来像这样：

当我添加Office.addin.showAsTaskpane()对share函数的调用时，它看起来像这样：

如何使用执行功能操作但在任务窗格中执行此操作？我想要一个共享的运行时，并且我希望所有的运行时都打开并位于任务窗格中。该文档使 AppDomains 似乎可以实现这一目标，但我不确定我做错了什么。

感谢您提供任何信息 - 我真的很感激！

Answer 1

我认为这里的关键问题是您想根据函数执行更改任务窗格中的某些状态。这实际上很简单，您不需要共享运行时。

在任务窗格的初始化部分，您必须注册事件侦听器以进行存储。

window.addEventListener('storage', () => {
  console.log('your local storage has changed');
});

在您的函数中，您可以利用本地存储，在其中写入值，当事件引发时您可以在任务窗格中访问这些值。

// example globally exposed function to be called using ExecuteFunction
function first(event) {
   localStorage.setItem('routePath', 'firstRoute');
   event.completed();
}

然后在你的任务窗格应用程序中你可以有

window.addEventListener('storage', () => {
  const askedPath = localStorage.getItem('routePath');
  if (askedPath !== existingPath) {
    reRouteApp(localStorage.getItem('routePath')
  }
});

根据您选择的框架，您可能需要注意如何注册此事件侦听器。举个例子，如果您使用reactand hash-router，您可以使用如下所示的重新路由方法：

const reRouteApp = (route) => {
  window.location.hash = route;
}

同时确保在 或 上注册侦听器事件，onComponentMount以app.js确保useEffect最终不会有多个侦听器。