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

Question

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

我在此 iframe 中执行的代码是:

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

执行此代码后，我的输出如下所示:

Request Id: 1

requestAnimationFrame 的回调永远不会执行。 requestAnimationFrame 已定义。如果我使用未优化的调用(例如 setInterval)，回调会正常工作。

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

是否可以采取任何步骤来调试此问题？ window.requestAnimationFrame 落后于 native 代码并且我的 requestId 有效...所以我有点不知所措。

编辑:

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

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

Answer 1

你的问题与iframe无关，与后台页面不可见有关。

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

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

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.