在 MS Teams（浏览器）中使用 Javascript 检索所有生成的 HTML

Question

我无法理解为什么我无法使用 Javascript 检索 MS Teams 聊天中的“发送”按钮（当使用 groups.microsoft.com 网站而不是应用程序时）。我在 MacOS 上使用 Chrome（Ventura 13.6.1 和 Chrome 版本 118.0.5993.117）。

当我将此代码粘贴到控制台时：

let buttonArray = document.querySelectorAll('button')
for (let index = 0; index < buttonArray.length; index++) {
  let element = buttonArray[index]
  console.log(`>> data-tid: ${element.getAttribute('data-tid')}`);
}
console.log(`> length: ${buttonArray.length}`);

...我看不到任何名为“newMessageCommands-send”的数据-tid。

但是当我检查底部聊天的发送按钮时，我肯定可以在文档元素中看到具有该 data-tid 属性的按钮。因此，在检查并运行之前的相同代码后，我现在得到了一堆带有其他 data-tid 名称的不同按钮，包括我需要的“newMessageCommands-send”。

我尝试单击聊天窗口中的随机点，看看这是否会触发新按钮在 Javascript 中购物，但它们仅在我检查发送按钮时才会出现。

我缺少什么:)有没有办法在页面加载完成后执行此操作？

document.querySelector('button[data-tid="newMessageCommands-send"]').style.backgroundColor = 'red';

只有当我首先检查发送按钮然后将此代码粘贴到控制台中时，这才有效。

Answer 1

您可能使用了错误的文档上下文。运行团队客户端时会打开多个文档（即它具有多个 IFRAME 元素），以防止用户应用程序直接与团队客户端文档交互，但仅允许使用团队 API 进行交互。这就是所谓的隔离。