iframe在视口中时，在iframe中启动css动画

Question

我正在使用CSS动画为Google AdWords开发HTML5横幅广告。由于广告只能有30秒的动画，因此用户通常无法看到动画中不同阶段的内容。

有没有办法找出（跨域）父窗口的视口，以便我可以在广告的CSS / JS代码中启动动画，当它实际上对用户可见时？

感谢您的帮助！

Answer 1

有两种方法可以解决您的问题。

首先，您需要编辑跨域父窗口的代码。如果你不能这样做，这不会工作（我想你会这样）。您需要添加事件侦听器并使用Window.postMessage。

另一种方法是使用Intersection Observer API。这正是你想要的东西，专为你的情况设计，但它目前得不到很好的支持。有关兼容性列表，请查看链接或caniuse。 如果它不可用，你可以通过一个简单的回退来实现它。