Question

我想访问/调试绑定到特定事件的功能。例如，我可以做

$> getEventListeners(window)

查看所有事件绑定到window对象，然后

$> debug(getEventListeners(window).focus[0].listener)

开始调试。

但是，就我而言，我有一个iframe

<body>
   ...
   <iframe id="test" name="test" src="./inner.html"></iframe>
   ...
</body>

现在假设inner.html包含以下内容：

<body>
    <div class="abc">Click me</div>
    <script>
        window.addEventListener('keydown', e => console.log('keydown', e));        
        document.querySelector('.abc').addEventListener('click', e => console.log('clicked', e));
    </script>
</body>

如上所述，我想调试这两个侦听器，结果发现getEventListeners不再起作用（或者我做错了！）

iframe = document.querySelector('iframe#game');
doc = iframe.contentDocument || iframe.contentWindow.document;
win = iframe.contentWindow;

getEventListeners(win); // -> {}
getEventListeners(doc.querySelector('.abc')); // -> {}

我得到了{}，找不到事件监听器。

问题是，如何在iframe中访问事件侦听器？

注意：因为这仅用于本地测试/调试，所以我可以根据需要切换任何Chrome设置！有什么建议吗？

Answer 1

作为@epascarello注释-您需要将调试窗口的上下文更改为iframe

Official documentation

Chrome DevTools getEventlisteners无法在iFrame中运行

1 个答案: