如何用JavaScript触发Google幻灯片演示者视图下拉加载并提取幻灯片编号

问题描述 #

我需要提取Google幻灯片演示者视图中的幻灯片编号，这些编号只有在点击幻灯片选择下拉菜单后，才会在goog-menuitem-checkbox类元素下列出。请问能否通过JavaScript触发该下拉菜单加载编号，进而完成提取？

演示者视图加载后的下拉菜单HTML #

<div class="goog-inline-block goog-flat-menu-button jfk-select" role="listbox" aria-expanded="false" tabindex="0" aria-haspopup="true" aria-activedescendant=":2p" style="user-select: none;">
  <div class="goog-inline-block goog-flat-menu-button-caption" id=":2p" role="option" aria-selected="true" aria-setsize="19" aria-posinset="1">Slide 1 </div>
  <div class="goog-inline-block goog-flat-menu-button-dropdown" aria-hidden="true">&nbsp;</div>
</div>

点击后的测试代码 #

点击下拉菜单后，可通过以下代码获取单条编号：

console.log(document.getElementsByClassName('goog-menuitem-checkbox')[0].nextSibling.data); 

解决方案 #

完全可以通过JavaScript触发下拉菜单加载并提取编号，具体步骤如下：

1. 定位下拉菜单触发按钮
   用类选择器定位触发下拉的按钮元素：

   const dropdownButton = document.querySelector('.goog-flat-menu-button.jfk-select');
   

2. 模拟点击触发下拉菜单
   直接调用click()方法触发点击，加载菜单选项：

   dropdownButton.click();
   

3. 等待菜单元素加载完成
   菜单为异步加载，需等待goog-menuitem-checkbox元素出现后再提取，提供两种实现方案：

   • 简单延迟方案（适合快速测试）：

     setTimeout(() => {
       extractSlideNumbers();
     }, 500); // 延迟时间可根据实际加载速度调整
     

   • MutationObserver方案（更稳定）：

     const observer = new MutationObserver((mutations) => {
       const menuItems = document.querySelectorAll('.goog-menuitem-checkbox');
       if (menuItems.length > 0) {
         extractSlideNumbers();
         observer.disconnect(); // 提取完成后停止监听
       }
     });
     // 监听body的DOM变化，直到菜单元素出现
     observer.observe(document.body, { childList: true, subtree: true });
     dropdownButton.click();
     

4. 提取所有幻灯片编号
   定义提取函数，遍历所有菜单元素并提取编号：

   function extractSlideNumbers() {
     const menuItems = document.querySelectorAll('.goog-menuitem-checkbox');
     const slideNumbers = Array.from(menuItems).map(item => {
       // 从文本中提取数字编号
       const text = item.nextSibling.data.trim();
       return text.match(/\d+/)[0];
     });
     console.log('幻灯片编号列表:', slideNumbers);
     // 可添加后续处理逻辑，如保存到变量或导出
   }
   

注意事项 #

• Google幻灯片的DOM结构可能更新，若类名或元素结构变化，需调整选择器。
• 若click()方法无效，可尝试模拟真实用户交互事件：

  dropdownButton.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
  

内容的提问来源于stack exchange，提问作者Markus