JavaScript自定义点击事件致iframe内按钮模拟点击失效求助

尝试触发嵌套iframe内按钮的点击事件时，控制台显示已找到目标按钮并执行了click()，但实际无任何反应。手动点击该下拉箭头能正常弹出菜单，但通过父框架的runExcel()函数调用点击后，无法找到弹窗内的菜单元素。怀疑目标按钮使用了自定义click事件，需要替代方法生成真实点击操作。

现有代码 #

function runExcel() {
  var iframe= document.getElementsByTagName("iframe")[0].contentWindow;
  var Report0 = iframe.document.getElementsByTagName("iframe")[0].contentWindow;
  var Report1 = iframe.document.getElementsByTagName("iframe")[1].contentWindow;

  // 查找下拉箭头元素
 const dropdownArrow = Report0.document.querySelector('#AppToolbarLeftPane_btnRun_dropdown');
  console.log('Dropdown arrow element:', dropdownArrow);

  console.log('>>>>>>>>>>>>>>>>>>>>', {Report0});
  console.log('>>>>>>>>>>>>>>>>>>>>', Report0.document);
  console.log('>>>>>>>>>>>>>>>>>>>>', {dropdownArrow});

  // 点击下拉箭头打开菜单
  if (!!dropdownArrow) {
    dropdownArrow.click();
    console.log('Clicked dropdown arrow');
    
    // 查找“Run Excel”菜单项
    setTimeout(() => {
      const runExcelItem = Report0.document.querySelector('#mnuAppToolbarLeftPaneRun_spreadsheetML');
      console.log('"Run Excel" menu item:', runExcelItem);

      // 点击“Run Excel”菜单项执行报告
      if (!!runExcelItem) {
        runExcelItem.click();
        console.log('Clicked "Run Excel" menu item');
      } else {
        console.log('Could not find "Run Excel" menu item');
      }
    }, 1000);
  } else {
    console.log('Could not find dropdown arrow');
  }
}

<button type="button" role="button" onclick="runExcel();">runExcel</button>

控制台输出 #

Dropdown arrow element: <td class=​"clsToolbarButton" id=​"AppToolbarLeftPane_btnRun_dropdown" _ppk=​"1" title=​"Run actions" hal_tooltipposition=​"bottom" _28g=​"mnuAppToolbarLeftPaneRunPopup" bshowspopup=​"true" bshowsdialog=​"true" style=​"display:​ none;​">​…​</td>​
disp:249 >>>>>>>>>>>>>>>>>>>> {Report0: Window}
disp:250 >>>>>>>>>>>>>>>>>>>> #document
disp:251 >>>>>>>>>>>>>>>>>>>> {dropdownArrow: td#AppToolbarLeftPane_btnRun_dropdown.clsToolbarButton}
disp:256 Clicked dropdown arrow
disp:261 "Run Excel" menu item: null
disp:268 Could not find "Run Excel" menu item

• 模拟完整鼠标事件流
  很多自定义交互会依赖完整的鼠标事件链（mousedown→mouseup→click），单纯调用element.click()可能触发不全。可以手动创建并分发这些事件：

  function simulateRealClick(element) {
    const events = [
      new MouseEvent('mousedown', { bubbles: true, cancelable: true, view: element.ownerDocument.defaultView }),
      new MouseEvent('mouseup', { bubbles: true, cancelable: true, view: element.ownerDocument.defaultView }),
      new MouseEvent('click', { bubbles: true, cancelable: true, view: element.ownerDocument.defaultView })
    ];
    events.forEach(evt => element.dispatchEvent(evt));
  }
  

  替换原代码中的dropdownArrow.click()为simulateRealClick(dropdownArrow)，菜单元素的点击也用这个方法。

• 排查弹窗的实际挂载位置
  部分弹窗会被挂载到顶级文档（window.top.document）而非当前iframe的文档中。可以在控制台尝试window.top.document.querySelector('#mnuAppToolbarLeftPaneRun_spreadsheetML')，或者检查其他iframe的文档结构，确认菜单元素的真实位置。

• 用MutationObserver替代固定延迟
  固定1秒的setTimeout不稳定，弹窗渲染可能有延迟。用MutationObserver监听DOM变化，一旦目标菜单元素出现就执行点击：

  if (!!dropdownArrow) {
    simulateRealClick(dropdownArrow);
    console.log('Clicked dropdown arrow');
  
    const observer = new MutationObserver(() => {
      const runExcelItem = Report0.document.querySelector('#mnuAppToolbarLeftPaneRun_spreadsheetML');
      if (runExcelItem) {
        simulateRealClick(runExcelItem);
        console.log('Clicked "Run Excel" menu item');
        observer.disconnect();
      }
    });
  
    observer.observe(Report0.document.body, { childList: true, subtree: true });
  }
  

• 检查目标元素的可见性
  从控制台输出看到目标按钮的style="display: none;"，手动点击的大概率是该元素的可见父节点或兄弟元素。可以尝试查找同容器下的可见元素（比如dropdownArrow.parentElement.querySelector('.clsToolbarButton:not([style*="display: none"])')），再触发点击。

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