如何将PowerPoint任务窗格文本框的值传递到对话框中显示

嘿，我来帮你搞定这个问题！要把任务窗格文本框里的内容传到对话框并显示，其实有两种实用的方法，我给你一步步讲清楚，你可以根据需求选适合自己的：

方法一：通过URL参数传递（适合简单文本内容） #

这种方法最直接，就是把文本框的值编码后拼接到对话框的URL后面，然后在对话框页面里读取URL参数并显示。

步骤1：修改任务窗格的按钮点击逻辑 #

在任务窗格的JS代码里，获取文本框值、编码后拼接到URL，打开对话框后清空文本框：

document.getElementById('odi').addEventListener('click', async () => {
  // 获取文本框的输入内容，顺便去掉前后空格
  const query = document.getElementById('tarea').value.trim();
  
  // 先判断用户有没有输入内容
  if (!query) {
    alert('请先输入内容哦！');
    return;
  }
  
  // 对内容进行URL编码，避免特殊字符（比如&、空格）导致URL出错
  const encodedQuery = encodeURIComponent(query);
  // 把编码后的内容作为参数拼接到对话框URL后面
  const dialogUrl = `https://localhost:3000/test.html?content=${encodedQuery}`;
  
  // 打开对话框
  await Office.context.ui.displayDialogAsync(dialogUrl, {
    height: 70,
    width: 80,
    displayInIframe: true,
  });
  
  // 打开对话框后清空文本框
  document.getElementById('tarea').value = '';
});

步骤2：在对话框页面（test.html）读取参数并显示 #

在test.html里，通过URLSearchParams获取参数，解码后显示到页面上：

<!DOCTYPE html>
<html>
<body>
  <!-- 用来显示传递过来的内容 -->
  <div id="displayContent" style="padding: 20px; font-size: 16px;"></div>
  
  <script>
    // 获取URL中的查询参数
    const urlParams = new URLSearchParams(window.location.search);
    const content = urlParams.get('content');
    
    // 如果有内容，解码后显示出来
    if (content) {
      document.getElementById('displayContent').textContent = decodeURIComponent(content);
    }
  </script>
</body>
</html>

方法二：使用Office Dialog消息传递机制（适合复杂数据/双向交互） #

如果后续需要和对话框做更多交互，或者传递的内容比较复杂，推荐用Office提供的消息传递API，这种方式更灵活。

步骤1：修改任务窗格的JS代码 #

保存对话框对象，监听对话框的消息请求，收到请求后把文本框的值发过去：

let dialogInstance; // 保存对话框实例，方便后续通信

document.getElementById('odi').addEventListener('click', async () => {
  const query = document.getElementById('tarea').value.trim();
  
  if (!query) {
    alert('请先输入内容哦！');
    return;
  }
  
  // 打开对话框并保存实例
  const dialogResult = await Office.context.ui.displayDialogAsync('https://localhost:3000/test.html', {
    height: 70,
    width: 80,
    displayInIframe: true,
  });
  dialogInstance = dialogResult.value;
  
  // 监听对话框发送的消息
  dialogInstance.addEventHandler(Office.EventType.DialogMessageReceived, (args) => {
    // 如果对话框请求内容，就把文本框的值发回去
    if (args.message === 'get-content') {
      dialogInstance.messageParent(query);
      // 发送后清空文本框
      document.getElementById('tarea').value = '';
    }
  });
  
  // 监听对话框关闭事件，清理实例
  dialogInstance.addEventHandler(Office.EventType.DialogEventReceived, () => {
    dialogInstance = null;
  });
});

步骤2：修改对话框页面（test.html）的代码 #

加载Office.js后，向任务窗格发送请求，然后监听返回的消息并显示：

<!DOCTYPE html>
<html>
<body>
  <div id="displayContent" style="padding: 20px; font-size: 16px;"></div>
  
  <!-- 必须引入Office.js才能使用对话消息API -->
  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
  
  <script>
    // 初始化Office环境
    Office.initialize = () => {
      // 向任务窗格发送消息，请求内容
      Office.context.ui.messageParent('get-content');
      
      // 监听任务窗格返回的消息
      Office.context.ui.addHandlerAsync(Office.EventType.DialogMessageReceived, (args) => {
        const content = args.message;
        document.getElementById('displayContent').textContent = content;
      });
    };
  </script>
</body>
</html>

两种方法都能实现你的需求，简单文本用方法一就够了；如果以后要加更多交互逻辑，方法二更合适。

备注：内容来源于stack exchange，提问作者Iden Crisler