访问iframe中的事件时使用<iframe> - 使用Chrome扩展程序</iframe>

Question

使用扩展程序时，我想在其中发生特定事件时测量iframe（相对于顶部窗口）的偏移量。 这包括不同来源的iframe。

似乎需要两件事：

1. 在iframe自己的内容文档中捕获事件
2. 在其父窗口中找到iframe的相应DOM元素（<iframe>）并测量其偏移量

我可以在所有可以捕获特定事件的iframe中运行内容脚本，但是我无法在具有不同来源的iframe中识别iframe的相应DOM元素，因为在这些情况下我被拒绝访问'window.frameElement ”。

有什么想法吗？ 我可以查找一个'src'属性对应于'window.location.href'的元素，如iframe的content-script的上下文中所示，但'window.location.href'不是唯一的标识符。 ..还是会吗？

Answer 1

您可以采取以下方法：

1. 使用清单文件中"all_frames":true的{​​{1}}标志来执行所有框架中的内容脚本。
2. 绑定执行逻辑的"content_scripts"事件侦听器。
3. 为有问题的触发器绑定事件侦听器。

4. 每当触发第3步中的事件时，请使用message确定我们是否在顶部窗口内。

   • 如果是，我们就完成了。
   • 如果没有，请使用if (top === window)将数据传递到父框架。第2步中的parent.postMessage({currentTotal: ... }, '*');事件侦听器应检测此事件，处理它并重复第3步。

我已经解释了如何处理这个问题。一个更有用的代码片段：您需要识别源帧。为此，我们使用message对象的contentWindow属性与事件对象的<iframe>属性进行比较：

source

通过这些提示，您应该能够自己编写完整的代码。要测量偏移量，请使用getBoundingClientRect方法。为了完整起见，我还提供了其他相关文档的链接：window.postMessage，Content scripts (manifest)。