Google chrome 访问<；iframe>；在iframe中发生事件时-使用chrome扩展

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

这似乎需要两件事：

在iframe自己的内容文档中捕获事件

在其父窗口中查找iframe对应的DOM元素（

），并测量其偏移量

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

有什么想法吗？

---

我也许可以查找一个元素，该元素具有与iframe内容脚本上下文中的“window.location.href”相对应的“src”属性，但“window.location.href”不是唯一标识符。。。或者会吗？

您可以采取以下方法：

在清单文件中使用

“内容脚本”

的

“所有帧”：true

标志在所有帧中执行内容脚本

绑定执行逻辑的

消息

事件侦听器

为相关触发器绑定事件侦听器

每当触发步骤3中的事件时，使用

if（top==window）

确定we是否在顶部窗口内

• 如果是，我们就完成了
• 如果不是，则使用

  parent.postMessage（{currentTotal:…}，'*'）

  将数据传递到父帧。第二步中的

  消息

  事件侦听器应检测到该事件，对其进行处理，然后重复第三步

我已经解释了如何解决这个问题。还有一个有用的代码片段：您需要标识源帧。为此，我们使用

对象的

contentWindow

属性与事件对象的

source

属性进行比较：

window.addEventListener('message', function(event) {
    if (top === window) {
        // do something with e.data
    } else {
        var iframes = document.getElementsByTagName('iframe');
        for (var i=0; i<iframes.length; i++) {
            if (iframes[i].contentWindow === event.source) {
                // Found frame; measure offset, and pass data to parent frame
                var data = e.data;
                e.data += iframes[i].getBoundingClientRect().top; // example
                parent.postMessage({currentTotal: data}, '*');
                break;
            }
        }
    }
});

window.addEventListener（'message'，函数（事件）{
如果（顶部===窗口）{
//用电子数据做点什么
}否则{
var iframes=document.getElementsByTagName（'iframe'）；
对于（var i=0；问题是父级在作为父对象的不同原点的ifram的内容脚本上下文中未定义。@rsanchez注入脚本，以便在页面上下文中运行。有关注入的详细信息，请参阅chrome inspector，因为它允许在任何上下文中运行代码：所有的“top”、“parent”和“ifram”es[i].contentWindow在扩展上下文中未定义，在页面上下文中抛出“不安全的javascript…”-处理具有不同来源的iFrame时。@after
iframes[i].contentWindow
可以用于严格的比较，而不会引发任何错误。正如我在上一篇评论中所说的，将代码插入页面。我已经创建了一个详细的答案（请参阅上一篇评论中的链接），所以我不会在回答中重复这一点。如果您在尝试时遇到困难，请回复并解释您在没有运气的情况下尝试了什么。此外，“window.postMessage”是否可以用于在内容脚本之间发送消息，或者是否应该使用扩展的消息传递？