animation - 是否可以暂停 iframe？（所有脚本/css 动画停止）

Question

看看codepen上的笔：http: //codepen.io/

几秒钟后，他们都停下了。如果您检查这些元素，您会发现它们实际上是真正的 iframe，但不知何故，它们设法“暂停”了它们。

这是怎么做的？

Answer 1

它是通过加载的内容来完成的，参见http://codepen.io/rafaelcastrocouto/full/pfxat的源码（第一个的iFrame路径）。

Answer 2

我知道这是一个非常古老的帖子，但对于那些在 2018 年仍然好奇的人：

你需要

• 禁用动画
• 禁用音频/视频元素
• 把它包起来并设置一个超时
• 将其注入每个 iFrame

不用担心，它非常简单明了。

禁用所有 CSS 动画

下面将查找并遍历 DOM 中呈现的所有节点。对于每个 HTMLElement，它会将 CSS 属性设置为“暂停”。

function disablewebkitAnimations() {
    var nodes = document.querySelectorAll('*')
    for (var i = 0; i < nodes.length; i++) {
        style = nodes[i].style
        style.webkitAnimationPlayState = 'paused'
        document.body.className = 'paused'
    }
}

禁用音频/视频

下面的函数将选择 type类型的所有元素，遍历它们并简单地调用pause()方法。

function pauseElementTypes(type) {
    let nodes = document.querySelectorAll(type)
    for (var i = 0, els = document.getElementsByTagName(type); i < els.length; i++) {
        els[i].pause();
    }
}

注意：这不会停止未在 DOM 中呈现的音频和视频元素。这意味着如果您创建一个新的 HTMLAudioElement 然后播放它但不将其附加到您的文档中，它将继续播放。这就是为什么 CodePen 上的一些笔在结果中有时仍能发出声音的原因。

把它包起来

一个简单的函数，可以完成我们刚刚描述的所有事情。

function iFrameDisable() {
    disablewebkitAnimations()
    pauseElementTypes("audio")
    pauseElementTypes("video")
}

setTimeout(iFrameDisable, 4000) // execute after 4 seconds

注入

基本上，在 CodePen 上，他们在搜索结果的每个 iFrame 中注入以下代码。（函数名称可能不同，但在概念上是相同的）

<script>
function disablewebkitAnimations() {
    var nodes = document.querySelectorAll('*')
    for (var i = 0; i < nodes.length; i++) {
        style = nodes[i].style
        style.webkitAnimationPlayState = 'paused'
        document.body.className = 'paused'
    }
}

function pauseElementTypes(type) {
    let nodes = document.querySelectorAll(type)
    for (var i = 0, els = document.getElementsByTagName(type); i < els.length; i++) {
        els[i].pause();
    }
}

function iFrameDisable() {
    disablewebkitAnimations()
    pauseElementTypes("audio")
    pauseElementTypes("video")
}

setTimeout(iFrameDisable, 4000)
</script>

阅读有关在开发人员上禁用 iFrame的更多信息。