时间戳

首页 > 解决方案 > 如何获取与 iframe 内的元素关联的事件？

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

问题描述

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

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

标签： javascript

解决方案

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

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

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

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

cors错误示例

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

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

希望这可以帮助！

推荐阅读