根据 iframe 中的事件访问 <iframe> - 使用 chrome 扩展

Question

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

似乎需要两件事：

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

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

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

Answer 1

您可以采取以下方法：

1. 使用清单文件中"content_scripts" 的"all_frames":true 标志在所有帧中执行内容脚本。
2. 绑定一个执行逻辑的message事件监听器。
3. 为相关触发器绑定事件侦听器。

4. 每当第 3 步中的事件被触发时，使用if (top === window) 来确定我们是否在顶部窗口内。

   • 如果是，我们就完成了。
   • 如果没有，请使用parent.postMessage({currentTotal: ... }, '*'); 将数据传递给父框架。第二步中的message 事件侦听器应检测到此事件，对其进行处理，然后重复第三步。

我已经解释了如何解决这个问题。一个更有用的代码sn -p：你需要识别源框架。为此，我们使用<iframe> 对象的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;
            }
        }
    }
});

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