如何获取与 iframe 内的元素关联的事件？

Question

我正在使用 Chrome DevTools 并正在查看元素选项卡中的事件侦听器。 当所考虑的元素不在 iframe 内时，它工作得很好——但是当它在 iframe 内时，事情就有点不稳定了。 我该如何补救？ 提前致谢

编辑：我忘了提，这不是我的网站

Answer 1

这是跨域 iframe 的安全问题。 如果您拥有该 iframe 内部的域，那么它应该可以正常工作。 同源 iframe 的工作示例

（该站点的代码粘贴在下面）

const iframe = document.getElementsByTagName('iframe')[0]; // grab a reference
iframe.contentWindow.document.getElementsByTagName('body') // here's the body!

如果您要在域与您当前所在页面不同的 iframe 上执行上述代码，那么您将收到 CORS 错误，如下所示

一种解决方法是，如果您在框架内有一个脚本并使用类似postMessage的东西，您可以将您想要的信息广播到嵌入 iframe 的父 window。 这需要与您要嵌入其域的公司/网站合作，这显然需要一定程度的信任，您不会做任何恶意的事情。

如果您考虑一下，可能存在这种情况的原因之一是，如果您要为另一个站点嵌入登录页面，则无法添加事件侦听器并窃取用户的登录信息。

希望这可以帮助！