window.requestAnimationFrame 在跨域 iframe 内调用时静默调用回调失败，但会生成有效的 requestID

Question

我正在使用 Google Chrome 扩展程序进行开发。在这种环境下，我可以在请求适当的权限后将 JavaScript 注入第三方网站。因此，我将代码注入到引用跨域资源的 iframe 中，但不受“正常”环境中预期的相同跨域安全策略的约束。

我在这个 iframe 中执行的代码是：

var requestId = window.requestAnimationFrame(function(){
    console.log("Success");
});
console.log("Request Id:", requestId);

这段代码执行后，我的输出如下：

请求 ID：1

requestAnimationFrame 的回调永远不会被执行。 requestAnimationFrame 已定义。如果我使用 setInterval 等非优化调用，回调可以正常工作。

回调在 iframe 之外正确执行，但当它在 iframe 内失败时，我的控制台中不会显示任何安全错误。这仅适用于最新版本的 Google Chrome —— 不要担心 requestAnimationFrame 的其他实现。

我可以采取任何步骤来调试此问题吗？ window.requestAnimationFrame 进入本机代码，我的 requestId 是有效的......所以我有点茫然。

编辑：

以下是将问题重现为小型 Google Chrome 扩展程序的完整源代码：https://gist.github.com/MeoMix/37b4dbdbb3bd48f3c9e2

这是上述源代码的可下载 zip：https://mega.co.nz/#!2BFA1agY!JSZC1BFBza3rU4LnqlZqcR9neZQRJn0yh1U6tu2GWo4

Answer 1

您的问题与 iframe 无关，而是与背景页面的不可见性有关。

将背景页面视为非焦点标签。如果您在非活动选项卡中使用requestAnimationFrame，则在选项卡再次获得焦点之前不会调用回调，如下例所示。由于后台页面永远不会被“聚焦”，因此永远不会调用 RAF 回调。

将以下代码粘贴到控制台中，然后移至其他选项卡。等待几秒钟，然后再次激活选项卡。您将看到控制台中记录的时间戳非常接近。这说明只有在tab再次获得焦点时才会调用RAF的回调。

setTimeout(function() {
    console.time(1);
    console.time(2)
    requestAnimationFrame(function() {
        console.timeEnd(1)
    });
}, 2000)
window.onfocus = function() {
    console.timeEnd(2);
};

您的问题的“解决方案”是改用旧的setTimeout：

setTimeout(function() {
    console.log('Success');
}, 25); // 40 Hz.